React getSnapshotBeforeUpdate() 方法

React getSnapshotBeforeUpdate() 方法

React 组件生命周期

render() 方法格式如下：

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 方法在最近一次渲染输出（提交到 DOM 节点）之前调用。

在 getSnapshotBeforeUpdate() 方法中，我们可以访问更新前的 props 和 state。

getSnapshotBeforeUpdate() 方法需要与 componentDidUpdate() 方法一起使用，否则会出现错误。

以下实例使用 getSnapshotBeforeUpdate() 方法查看更新前 state 对象的值，实例会在 1 秒延迟后显示更新前与更新后的不同值：

实例

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritesite: "zhishitu"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritesite: "google"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "在更新前喜欢的网站是：" + prevState.favoritesite;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "更新后喜欢的网站是：" + this.state.favoritesite;
  }
  render() {
    return (
      <div>
        <h1>我喜欢的网站是 {this.state.favoritesite}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}
 
ReactDOM.render(<Header />, document.getElementById('root'));

React 组件生命周期