React生命周期

React生命周期

初始化阶段

1. constructor(props)

React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。

官方建议不要在constructor引入任何具有副作用和订阅功能的代码，这些应当使用componentDidMount()。

constructor中应当做些初始化的动作，如：初始化state，将事件处理函数绑定到类实例上，但也不要使用setState()。如果没有必要初始化state或绑定方法，则不需要构造constructor，或者把这个组件换成纯函数写法。

当然也可以利用props初始化state，在之后修改state不会对props造成任何修改，但仍然建议大家提升状态到父组件中，或使用redux统一进行状态管理。

constructor(props) {
    super(props);
      this.state = {
        isLiked: props.isLiked
      };
}

1. 通过super来继承父类身上传递过来的属性，让后当前组件通过this.props接收

2. 用来初始化一个状态

3. 用来初始化绑定一个方法，将this传递给这个方法

​ 注意：

​ 不写方法的触发（ 订阅 ）

​ 不写具有副作用的代码（ 比如： 计时器

2. static getDerivedStateFromProps(nextProps, prevState)

getDerivedStateFromProps 是react16.3之后新增，在组件实例化后，和接受新的props后被调用。他必须返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。

如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。

调用steState()不会触发getDerivedStateFromProps()。

之前这里都是使用constructor+componentWillRecieveProps完成相同的功能的

 static getDerivedStateFromProps (nextProps, prevState) {
    console.log('1', nextProps ) // 将来的属性
    console.log( '2',prevState ) //变化前的值
    /* 
      17版本将来会使用

        1. 数据请求
        2. 数据修改
            返回值就是修改后的数据
    */
    return {
      msg: 'hello'
    }
  }