資料結構
網路
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 次瀏覽
廣告