資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學React.js 元件生命週期 - 掛載階段
每個有狀態的（基於類的）元件都會經歷四種生命週期階段。
- 掛載或建立
- 更新
- 解除安裝或銷燬
- 錯誤處理階段
React.js 元件生命週期 - 掛載階段
在建立生命週期期間執行的方法如下：
- 建構函式 (constructor)
- componentWillMount（僅在 17 版本之前可用）
- render
- componentDidMount
constructor ()
- 這是一個 ES6 特性，而不是 React 提供的方法。
- React 使用建構函式將 props 傳遞給從 React 庫繼承的父元件。
constructor(props){
super( props );
}- 將 props 傳遞給父元件有助於我們在元件中使用**this.props**。
我們可以在建構函式中初始化元件的狀態。重要的是，我們不應該在建構函式中使用 setState 方法。因為 setState 的設計目的是更新狀態，而不是建立狀態。
在建構函式中使用 setState 可能會導致元件不可預測或無限次重新渲染。
- 示例用法：
constructor(props){
super(props);
this.state = {
test: ‘example’
}
}- 應避免在建構函式中進行諸如呼叫 Web API 之類的副作用。因為 Web API 呼叫需要時間才能返回結果，在此期間建構函式方法將完成其執行。
- 方法繫結也可以在建構函式中完成，例如：this.handleNewUser = this.handleNewUser.bind(this);
componentWillMount
- 我們可以在此處更新狀態。
- 可以進行最後一刻的最佳化
- 此方法很少使用，因為它位於建構函式和 render 之間。元件生命週期的這個時間點所需的一切，都已經由建構函式完成或將由 render 方法完成。
- 可以在這裡建立日誌記錄或資料庫連線。
- 這是一個遺留方法，React 本身建議從 17 版本開始在新版本中不要使用此方法。
render
- 執行 render 方法使 React 瞭解需要更新實際 DOM 的內容。
- React 保留原始 DOM 的副本，我們稱之為虛擬 DOM。
- 更改發生在虛擬 DOM 上，最後，React 將虛擬 DOM 與原始 DOM 進行比較以更新後者。
- 此方法構建並準備返回給 DOM 的 JSX 程式碼。
- 在 render 方法內部，我們可以使用子元件的 JSX 程式碼。
- 因此，子元件的生命週期方法將在此時間點執行。
componentDidMount
- 此方法的執行意味著元件已成功掛載或建立在真實的 DOM 上。
- 在這裡，我們可以執行副作用，例如使用計時器、呼叫 Web API、新增事件監聽器。
- 此方法在有狀態元件的生命週期中只調用一次。
- 在此方法中使用 setState 可以再次觸發 render 以更新 DOM。
- 我們能夠在此方法內執行副作用，因為它只執行一次，因此如果我們使用 setState 更新狀態，就不會出現無限迴圈。
- 如果我們想操作 DOM 節點，那麼此方法是執行此操作的最佳位置。
下面顯示了呼叫 Web API 的示例
如果您的系統上安裝了最新的 node.js，則可以使用以下命令使用 cmd 建立 React 專案
npx create-react-app componentdidmount-example
create-react-app 後面的專案名稱是使用者指定的。由於 npm 命名約定，專案名稱中不允許使用大寫字母。
我們將使用 Axios 進行 Web API 呼叫。要安裝它，請使用以下命令
npm install –save axios
為了演示此示例，我們使用了 jsonplaceholder 提供的開源虛擬 API： https://jsonplaceholder.typicode.com/users
App.js 檔案
import React, { Component } from 'react';
import axios from 'axios'
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state={
users:{},
isUsersLoaded:false
}
}
componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/users')
.then(result=>{
console.log(result);
this.setState({users:result.data,isUsersLoaded:true});
});
}
render(){
if(!this.state.isUsersLoaded){
return <div>Loading...</div>
}
return (
<ul>
{this.state.users.map(user => (
<li key={user.id}>
{user.name}
</li>
))}
</ul>
);
}
}
export default App;我們使用建構函式初始化我們的使用者和 isUserLoaded 標誌。
ComponentDidMount 生命週期用於從伺服器獲取使用者，並在我們非同步接收使用者列表後更新列表。
在 render 生命週期方法中，我們在收到使用者列表之前顯示載入文字。
瀏覽器上的輸出如下所示：
更新於： 2019-09-04
瀏覽量：302
廣告