資料結構
組網
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究ReactJS —— componentDidUpdate() 方法
在本文中，我們將學習如何在 DOM 樹中更新元件時執行函式。
只有在元件更新或傳遞給其的屬性更改時，才會呼叫此方法。它不會在元件的初始渲染中呼叫。此方法主要用於執行某些僅在更新 DOM 時才需要執行的操作。
為了避免任何效能問題，建議使用條件迴圈來使用此方法，如下所示：
componentDidUpdate(prevProps, prevState) {
if (prevState.text !== this.state.text) {
// Write logic here.
}
}語法
componentDidUpdate(prevProps, prevState, snapshot)
引數
prevProps ——傳遞給此元件的上一個屬性
prevState ——元件的上一個狀態
snapshot ——getSnapshotBeforeUpdate() 方法返回的值
示例
在此示例中，我們將構建一個變色的 React 應用程式，它將在單擊按鈕時更改文字顏色，該按鈕將更新元件，並且將呼叫 **componentDidUpdate** 方法。
在以下示例中，我們的第一個元件是 **App**。此元件是 **Change **元件的父元素。我們單獨建立 **Change **，並且將其新增到 **App** 元件中的 JSX 樹中。因此，只需要匯出 App 元件。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Tutorialspoint</h1>
<Change />
</div>
);
}
}
class Change extends React.Component {
constructor(props) {
super(props);
this.state = { color: '#000' };
}
componentDidUpdate() {
console.log('componentDidUpdate method is called');
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Simply Easy Learning</h1>
<button onClick={() => this.setState({ color: '#0f0' })}>
Change Color
</button>
</div>
);
}
}
export default App;輸出
將產生以下結果。
更新於：2021 年 3 月 18 日
1000+ 次瀏覽
廣告