我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文来说说另外一个不咋常用的新生命周期函数getSnapshotBeforeUpdate()。经过苏南大叔的测试，这个函数发生在render之后，真正的ui变动之前，然后发生的就是DidUpdate。用于在UI也就是页面元素发生变化之前获得一个Snapshot快照。听起来也是个没啥用的函数，使用的概率不高。

苏南大叔：react教程，类组件生命周期getSnapshotBeforeUpdate - getsnapshotbeforeupdate-hero
react教程，类组件生命周期getSnapshotBeforeUpdate（图3-1）

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述新的react生命周期函数getSnapshotBeforeUpdate()。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

测试代码

这个getSnapshotBeforeUpdate()发生在组件更新的阶段，相关的shouldComponentUpdate(nextProps, nextState)需要返回为true，或者根本别定义shouldComponentUpdate()。

直接放代码：

import React, { Component, createRef } from 'react'

export default class index extends Component {
  constructor(props) {
    console.log("constructor");
    super(props);
    this.state = { "iam": "苏南大叔" };
  }
  componentDidMount() {
    console.log("componentDidMount");
    setTimeout(() => {
      this.setState({ "iam": "sunan大叔" })
    }, 1000)
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log(nextProps, prevState, "getDerivedStateFromProps");  // 新的`props`，前一个`state`
    return { "拟合": Date.now().toString().slice(-6) }
  }
  render() {
    console.log(this.props, this.state, "render");
    return (
      <div id="test">
        <h1>我是{this.state.iam}</h1>
      </div>
    );
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevProps, prevState, "getSnapshotBeforeUpdate");
    console.log("快照", document.getElementById("test").innerHTML);
    return "快照返回值";
  }
  componentDidUpdate(prevProps, prevState, snapShot) {
    console.log(prevProps, prevState, snapShot, "componentDidUpdate");
    console.log("现照", document.getElementById("test").innerHTML);
    console.log(prevState.iam + " ==> " + this.state.iam + " " + snapShot);
  }
}
JavaScript

苏南大叔：react教程，类组件生命周期getSnapshotBeforeUpdate - 运行结果
react教程，类组件生命周期getSnapshotBeforeUpdate（图3-2）

参数传递

getSnapshotBeforeUpdate一般是要配合componentDidUpdate使用的。

核心代码是：

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevProps, prevState, "getSnapshotBeforeUpdate");
    console.log("快照", document.getElementById("test").innerHTML);
    return "快照返回值";
  }
  componentDidUpdate(prevProps, prevState, snapShot) {
    console.log(prevProps, prevState, snapShot, "componentDidUpdate");
    console.log("现照", document.getElementById("test").innerHTML);
    console.log(prevState.iam + " ==> " + this.state.iam + " " + snapShot);
  }
JavaScript

从getSnapshotBeforeUpdate中return一个快照值，到componentDidUpdate中的第三个参数。

苏南大叔：react教程，类组件生命周期getSnapshotBeforeUpdate - 快照功能核心代码
react教程，类组件生命周期getSnapshotBeforeUpdate（图3-3）

执行顺序位置

根据测试，该生命周期的执行顺序位置是：

getDerivedStateFromProps => render(UI没变) => getSnapshotBeforeUpdate => UI变化 => componentDidUpdate
Plain text

这里得出的结论是：

  • 在render的时候仅仅是形成了字符串，并没有真的更新UI。所以，getSnapshotBeforeUpdate()才能获得更新前的快照。
  • 至于快照的返回值是啥，或者根本就没有（return null），这个就是个人自己定义的。只是在更新前，可以访问到对应的UI界面而已，想获得啥内容就直接返回啥内容。

参数及返回值

看看这个表格，首先需要强调的是：getDerivedStateFromProps发生在getSnapshotBeforeUpdate之前。

周期propsstate返回值执行位置
getDerivedStateFromPropsnextPropsprevState新的状态值第一个被执行
getSnapshotBeforeUpdateprevPropsprevState从更新前的UI上得出的某个快照值UI真正变化之前

结束语

更多react相关经验文章，请点击苏南大叔的博客文章：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react