ReactNative:五十二更新UNSAFE_componentWillReceiveProphotoshop

 一、不建议使用的

UNSAFE_componentWillReceiveProps(nextProps) 

UNSAFE_componentWillMount()

UNSAFE_componentWillUpdate(nextProps, nextState)

二、新增加的

getDerivedStateFromProps(nextProps, prevState)

1.父组件通知子组件pros发生变更时

2.子组件每次render前

3.首次构造时执行

getSnapshotBeforeUpdate(nextProps, prevState)

1.首次构造时不执行

2.子组件每次render后

三、UNSAFE_componentWillReceiveProps更新方案

1.由于getDerivedStateFromProps为static,所以无法调用this.props。

1.  
   static getDerivedStateFromProps(nextProps, prevState) {
2.  
   const {type} = nextProps;
3.  
   // type可能由props驱动，也可能由state驱动，这样判断会导致state驱动的type被回滚，
4.  
   // 如果子组件中设置type为不同的值，type到此依赖又被赋值为props中的值
5.  
   if (type !== prevState.type) {
6.  
   return {
7.  
   type,
8.  
   };
9.  
   }
10.  
    // 否则，对于state不进行任何操作
11.  
    return null;
12.  
    }

在state中增加prevPropEmail，prevState.prevPropEmail相当于this.props.email

1.  
   state = {
2.  
   email: this.props.email,
3.  
   prevPropEmail: '',
4.  
   };
5.  
    
6.  
   static getDerivedStateFromProps(nextProps, prevState) {
7.  
   if (nextProps.email !== prevState.prevPropEmail) {
8.  
   return {
9.  
   email: nextProps.email,
10.  
    prevPropEmail: nextProps.email,
11.  
    };
12.  
    }
13.  
    return null;
14.  
    }

返回值即，this.setSate中的对象，return null 或 return {} ，相当于this.setState({})进行整体的刷新

另一种不同写法

1.  
   constructor(props) {
2.  
   super(props);
3.  
   this.state = {
4.  
   type: 0,
5.  
   props,
6.  
   }
7.  
   }
8.  
   static getDerivedStateFromProps(nextProps, prevState) {
9.  
   const {type} = nextProps;
10.  
    const {props} = prevState;
11.  
    // 这段代码可能看起来非常混乱，这个props可以被当做缓存，仅用作判断
12.  
    if (type !== props.type) {
13.  
    return {
14.  
    type,
15.  
    props: {
16.  
    type,
17.  
    },
18.  
    };
19.  
    }
20.  
    return null;
21.  
    }

2.异步情况也可以由componentDidUpdate完成，如三方组件 

https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.component.tsx

1.  
   // 原代码
2.  
   UNSAFE_componentWillReceiveProps(nextProps) {
3.  
   // Either centerOn has never been called, or it is a repeat and we should ignore it
4.  
   if (
5.  
   (nextProps.centerOn && !this.props.centerOn) ||
6.  
   (nextProps.centerOn &&
7.  
   this.props.centerOn &&
8.  
   this.didCenterOnChange(this.props.centerOn, nextProps.centerOn))
9.  
   ) {
10.  
    // 执行混合动画
11.  
    this.centerOn(nextProps.centerOn);
12.  
    }
13.  
    }

1.  
   public componentDidUpdate(prevProps: ImageZoomProps): void {
2.  
   // Either centerOn has never been called, or it is a repeat and we should ignore it
3.  
   if (
4.  
   (this.props.centerOn && !prevProps.centerOn) ||
5.  
   (this.props.centerOn && prevProps.centerOn && this.didCenterOnChange(prevProps.centerOn, this.props.centerOn))
6.  
   ) {
7.  
   this.centerOn(this.props.centerOn);
8.  
   }
9.  
   }

这篇好文章是转载于：学新通技术网