react学习—新版生命周期

一、新版生命周期

React >= 16.0.0

相比旧版生命周期：
挂在阶段，新版移除了componentWillMount，使用getDerivedStateFromProps代替。
更新阶段，新版移除了componentWillReceiveProps，仍然使用getDerivedStateFromProps。移除了componentWillUpdate，新增了render之后的getSnapshotBeforeUpdate。

1.getDerivedStateFromProps

从属性中获取新的状态

export default class NewLife extends Component {
  state = {
    n: this.props.n
  }
  static getDerivedStateFromProps(Props, State) {
    console.log("getDerivedStateFromProps");
    console.log(Props,State);
    return null;//不改变当前状态
  }
  render() {
    return (
      <div>
        <h1>{this.state.n}</h1>
        <p>
          <button onClick={() => {
            this.setState({
              n: this.state.n + 1
            })
          }}>点击+1</button>
        </p>
      </div>
    )
  }
}

该函数如果返回null，则不对状态和属性做出修改，如果返回对象，则会覆盖状态和属性

  static getDerivedStateFromProps(Props, State) {
    console.log("getDerivedStateFromProps");
    console.log(Props,State);
    return { //用新的对象替换掉之前的状态
      n: 2
    }
  }

在生命周期getDerivedStateFromProps

1. 通过参数可以获取新的属性和状态
2. 该函数是静态的
3. 该函数的返回值会覆盖掉组件状态
4. 该函数几乎是没有什么用

2.getSnapshotBeforeUpdate

需要和componentDidUpdate联合使用

  getSnapshotBeforeUpdate = (prevProps, prevState) => {
    console.log("getSnapshotBeforeUpdate");
    return 132;
  }
  componentDidUpdate(prevProps, prevState, snap) {
    console.log("componentDidUpdate", snap);
  }

getSnapshotBeforeUpdate

1. 真实的DOM构建完成，但还未实际渲染到页面中。
2. 在该函数中，通常用于实现一些附加的dom操作
3. 该函数的返回值，会作为componentDidUpdate的第三个参数

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！