ReactJS getSnapshotBeforeUpdate() 方法

在渲染 DOM 之前调用 getSnapshotBeforeUpdate() 方法。它用于存储 DOM 更新后状态的先前值。

getSnapshotBeforeUpdate() 方法返回的任何值都将用作 componentDidUpdate() 方法的参数。此函数始终与 componentDidUpdate() 方法一起使用，但反之亦然。

句法：

getSnapshotBeforeUpdate(prevProps, prevState)

参数：它接受两个参数，它们是prevProps和prevState ，它们只是相关组件重新渲染之前的道具或状态。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

示例：演示使用 getSnapshotBeforeUpdate() 方法的程序。在这里，我们将使用状态的先前值和当前值来显示一些文本。

文件名：App.js：

Javascript

import React from 'react';
class App extends React.Component {
  
  // Initializing the state
  state = {
    name: 'GFG',
  };
  
  componentDidMount() {
  
    // Changing the state after 1 sec
    setTimeout(() => {
      this.setState({ name: 'GeeksForGeeks' });
    }, 1000);
  }
  
  getSnapshotBeforeUpdate(prevProps, prevState) {
  
    // Displaying the previous value of the state
    document.getElementById('prev').innerHTML =
      'Previous Name: ' + prevState.name;
  }
  
  componentDidUpdate() {
  
    // Displaying the current value of the state
    document.getElementById('new').innerHTML =
      'Current Name: ' + this.state.name;
  }
  
  render() {
    return (
      

        

        

      
    );
  }
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

参考： https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate