react的最新生命周期和旧版有一些区别，它删除了包含"will"关键词的钩子函数，增加了getDerivedStateFromProps和getSnapshotBeforeUpdate两个新钩子

getDerivedStateFromProps

getDerivedStateFromProps是React 16.3版本引入的一个新的生命周期钩子函数。它的作用是根据新的props和state来派生出一个新的state。这个生命周期函数在组件实例化、接收新的props、和父组件强制更新的时候都会调用。
它的用法类似于旧版的componentWillReceiveProps，但是getDerivedStateFromProps有两个参数：

• props：最新的props值
• state：当前组件的state

它的返回值应该是一个对象，代表着组件的新状态。如果不需要更新状态，则返回null。
这个函数在一定程度上能够减少由于componentWillReceiveProps导致的bug，因为它必须返回一个新的state，不能直接修改当前的state。这样做有一个好处，就是可以更好地控制状态的变化流程，增加组件的稳定性。

注:这个钩子几乎不使用

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate 是 React 组件生命周期中的一个钩子函数，它在组件更新 DOM 之前调用，常常用于处理在组件更新后，需要获取 DOM 相关信息的情况。
在每次组件更新时，getSnapshotBeforeUpdate 都会被调用，并且在 render 方法之后被调用。其返回值可以作为 componentDidUpdate 方法的第三个参数传入，从而能够在 componentDidUpdate 中访问到前一时刻的 DOM 信息。
一个典型的 getSnapshotBeforeUpdate 方法的实现可能如下所示：

class ExampleComponent extends React.Component {
   
   
  constructor(props) {
   
   
    super(props);
    this.myRef = React.createRef();
    this.state = {
   
   
      message: "",
    };
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
   
   
    // 计算更新前的 DOM 高度
    const prevHeight = this.myRef.current.scrollHeight;
    return prevHeight;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
   
   
    // 对比更新前后的 DOM 高度，并更新其它相关状态
    if (snapshot !== null) {
   
   
      const currentHeight = this.myRef.current.scrollHeight;
      if (currentHeight > snapshot) {
   
   
        this.setState({
   
    message: "Scrolling down" });
      } else if (currentHeight < snapshot) {
   
   
        this.setState({
   
    message: "Scrolling up" });
      } else {
   
   
        this.setState({
   
    message: "No scrolling" });
      }
    }
  }

  render() {
   
   
    return (
      <div ref={
   
   this.myRef}>
        {
   
   this.props.children}
        <p>{
   
   this.state.message}</p>
      </div>
    );
  }
}

在上面的例子中，getSnapshotBeforeUpdate 方法计算了更新前的 DOM 高度并返回。在 componentDidUpdate 方法中，通过比较更新前后的高度，我们可以判断用户是向上滚动还是向下滚动，并更新相应的状态。

小结

生命周期函数是React组件中的一些方法，它们在组件的不同状态下被调用，可以在这些函数中实现一些特定的行为。React组件的生命周期可以分为三个阶段：

1. 挂载阶段（Mounting）：组件被创建并插入到DOM中
2. 更新阶段（Updating）：组件被重新渲染
3. 卸载阶段（Unmounting）：组件被从DOM中移除

下面是React中常用的生命周期函数：

1. constructor(props)：初始化组件的状态和属性。
2. getDerivedStateFromProps(props, state)：在组件更新前被调用。返回值将会被添加到组件的状态中。
3. render()：渲染组件。必须返回一个React元素或null。
4. componentDidMount()：组件已经被挂载到DOM中。可以在这个函数中发送请求。
5. shouldComponentUpdate(nextProps, nextState)：组件将要更新。可以在这个函数中判断是否需要更新组件。
6. getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新前被调用。返回值会传递给componentDidUpdate()函数。
7. componentDidUpdate(prevProps, prevState, snapshot)：组件已经更新完毕。可以在这个函数中更新状态或者发送请求。
8. componentWillUnmount()：组件将要被卸载，可以在这个函数中清除定时器或者取消请求。