React新生命周期--getDerivedStateFromP

组件生命周期概述

1.初始化

在组件初始化阶段会执行

1. constructor

2. static getDerivedStateFromProps()

3. componentWillMount() / UNSAFE_componentWillMount()

4. render()

5. componentDidMount()

注意：这些方法被认为是遗留的，您应该在新代码中避免它们：

• UNSAFE_componentWillMount()

2.更新阶段

props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：

1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()

2. static getDerivedStateFromProps()

3. shouldComponentUpdate()

4. componentWillUpdate() / UNSAFE_componentWillUpdate()

5. render()

6. getSnapshotBeforeUpdate()

7. componentDidUpdate()

注意：这些方法被认为是遗留的，您应该在新代码中避免它们：

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

3.卸载阶段

1. componentWillUnmount()

错误处理
在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。

• static getDerivedStateFromError()
• componentDidCatch()

4.错误处理

1. componentDidCatch()

改变之前应该使用的是～～～

componentWillReceiveProps(nextProps){ 
    // 销量开关
    if (this.props.salesStatus !== nextProps.salesStatus) {
          this.setState({ salesStatus: nextProps.salesStatus });
    }
  
  // 营业开关
    if (this.props.openStatus !== nextProps.openStatus) {
        this.setState({
          openStatus: nextProps.openStatus,
    });
}

经过反映旧版本的componentWillReceiveProps是不安全的，我们必须使用，getDerivedStateFromProps。

改版后～～～

componentDidMount()  { 
    const something = ClassComponentName.runThisFunction();          
    this.setState({ updatedSomething: something });  
}  
static  getDerivedStateFromProps(nextProps, prevState)  {  
    if  (nextProps.key !== prevState.key)  {  
      return  { 
          updatedSomething: ClassComponentName.runThisFunction()  
       };  
    }  
    return  null;
  }
  funThisFunction()  {
  //do stuff and return value  
}

简单来说就是：

每次渲染组件时都会调用getDerivedStateFromProps。在旧版本中，getDerivedStateFromProps只会在props更新是执行而并且不会因组件setState而触发。FB指出这是最初实施过程中的疏忽，现在已经得到纠正。

所以，在16.4版本中，组件执行setState时也会触发getDerivedStateFromProps。

关于React生命周期-->戳它 react关于生命周期的官方文档。