資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時裝
法律ReactJS – componentDidMount 方法
本文將介紹當元件載入到 DOM 樹時如何執行函式。
此方法主要用於 React 生命週期中的載入階段，用於處理所有網路請求或設定應用程式的所有主要訂閱。
你可以在 componentDidMount 方法中隨時設定網路請求或訂閱，但是為了避免任何效能問題，需要在 React 生命週期解除安裝階段呼叫的 componentWillUnmount 方法中取消訂閱這些請求。
語法
componentDidMount()
示例
在本例中，我們將構建一個變色 React 應用程式，它將在元件載入到 DOM 樹後立即更改文字顏色。
以下示例中的第一個元件是 App。此元件是 ChangeName 元件的父元件。我們單獨建立 ChangeName，並在 App 元件的 JSX 樹中將其新增到內部。因此，僅需要匯出 App 元件。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Tutorialspoint</h1>
<ChangeName />
</div>
);
}
}
class ChangeName extends React.Component {
constructor(props) {
super(props);
this.state = { color: 'lightgreen' };
}
componentDidMount() {
// Changing the state after 3 sec
setTimeout(() => {
this.setState({ color: 'wheat' });
}, 2000);
}
render() {
console.log('ChangeName component is called');
return (
<div>
<h1>Simply Easy Learning</h1>
</div>
);
}
}
export default App;輸出
將會產生以下結果。
更新於： 18-Mar-2021
919 瀏覽次數
廣告