数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会研究
时尚研究
法律研究ReactJS——getSnapshotBeforeUpdate() 方法
在本文中，我们将了解如何在组件更新并呈现到 DOM 之前执行函数。
此方法在组件呈现之前及更新之后调用。主要用于比较组件的先前状态或先前属性和新状态或新接收的属性。此方法返回的值作为参数传递给 **componentDidUpdate ** 方法。
语法
getSnapshotBeforeUpdate(prevProps, prevState)
参数
prevProps - 传递给组件的先前属性
prevState - 组件的先前状态
示例
在此示例中，我们将构建一个 React 应用，它会获取用户列表，单击获取用户按钮时，Show 组件会放置到 DOM 中，更新此组件之后会调用 **getSnapshotBeforeUpdate** 方法，该方法显示状态的先前值。
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
show: false,
};
}
render() {
return (
<div>
<h1>User List</h1>
<h3>Username: Rahul</h3>
<button onClick={() => this.setState({ show: true })}>
Fetch Users
</button>
{this.state.show ? <User email="new@gmail.com" /> : null}
</div>
);
}
}
class User extends React.Component {
constructor() {
super();
this.state = {
email: 'previous@gmail.com',
};
}
componentDidMount() {
this.setState({ email: this.props.email });
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// Displaying the previous state
document.getElementById('previous').innerHTML = 'Previous Name: ' + prevState.email;
}
componentDidUpdate() {
// Displaying the current state
document.getElementById('new').innerHTML = 'Current Name: ' + this.state.email;
}
render() {
return (
<div>
<div id="previous">Previous Email: </div>
<div id="new">New Email: </div>
</div>
);
}
}
export default App;输出
这将生成以下结果。
更新于：2021 年 3 月 18 日
984 次浏览
广告