資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究ReactJS – componentWillUnmount() 方法
在本文中，我們將學習如何在元件從 DOM 樹中刪除時執行函式。
此方法在 React 生命週期解除安裝階段呼叫，即在元件從 DOM 樹中銷燬或解除安裝之前。此方法主要用於取消在 componentWillMount 方法中先前建立的所有訂閱。
切勿在 componentWillUnmount 方法中呼叫 this.setState()，因為此元件永遠不會再次重新渲染。
語法
componentWillUnmount()
舉例
在此示例中，我們將構建一個 React 應用程式，該應用程式顯示所有使用者的列表。單擊“刪除使用者”按鈕後，使用者元件將從 DOM 樹中解除安裝，並且在銷燬使用者元件之前將呼叫 componentWillUnmount 方法。
我們以下示例中的第一個元件是 App。此元件是 Change 元件的父元件。我們單獨建立 Change，然後將其新增到我們的 App 元件中的 JSX 樹中。因此，只需要匯出 App 元件。
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
delete: false,
};
}
render() {
return (
<div>
<h1>User List</h1>
<button onClick={() => this.setState({ delete: true })}>
Delete Users
</button>
{this.state.delete ? null : <User />}
</div>
);
}
}
class User extends React.Component {
componentWillUnmount() {
alert('Deleted User successfully');
}
render() {
return (
<div>
<h3>Username: Rahul</h3>
<h3>Email: rbbansal558@gmail.com</h3>
</div>
);
}
}
export default App;輸出結果
將產生以下結果。
更新日期：2021-03-18
5 千 + 閱讀量
廣告