React组件生命周期

在生命周期中每个阶段都有一个固定的函数，就叫生命周期函数。

React生命周期Old.jpg

V16.3之后（V16.4开始）

image.png

加入了

static getDerivedStateFromProps(props, state)

在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。
在下列三种情况下，会调用getDerivedStateFromProps方法：

1. 组件实例化。
2. 组件的props发生变化。
3. 父组件重新渲染。

getSnapshotBeforeUpdate() 官方例子：

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 我们是否要添加新的 items 到列表
    // 捕捉滚动位置，以便我们可以稍后调整滚动
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 如果我们有snapshot值, 我们已经添加了 新的items
    // 调整滚动以至于这些新的items 不会将旧items推出视图
    // (这边的snapshot是 getSnapshotBeforeUpdate方法的返回值)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      
{/* ...contents... */}
    );
  }
}

被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。