React 生命週期函式總結
阿新 • • 發佈：2021-10-13
我們使用 React 來開發專案時候，每個 react 元件都包含生命週期方法，我們可以在這些方法當中執行一些業務邏輯。生命週期方法包含了如下的幾個階段：
掛載：當元件例項被建立並插入 DOM 中時
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
更新：當元件的 props 或 state 發生變化時會觸發更新
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
解除安裝: 當元件從 DOM 中移除時會呼叫
- componentWillUnmount()
下圖更加清晰地展示了元件在不同階段呼叫的方法：
| 方法 | 是否必須 | 說明 |
|---|---|---|
| render() | 必須 | render() 方法是 class 元件中唯一必須實現的方法，呼叫此方法才能把JSX內容渲染到頁面上 |
| constructor() | 非必須 | constructor(props)，可以在建構函式裡面初始化 state 或進行方法繫結 |
| componentDidMount() | 非必須 | 會在元件掛載後（插入 DOM 樹中）立即呼叫，可以在裡面傳送 http 請求、設定定時器等操作 |
| componentDidUpdate() | 非必須 | componentDidUpdate(prevProps, prevState, snapshot),會在更新後會被立即呼叫，但是首次渲染不會執行此方法。注意：在此方面裡面呼叫 setState，應該避免出現死迴圈，可以將條件語句裡面更新 state |
| componentWillUnmount() | 非必須 | 會在元件解除安裝及銷燬之前直接呼叫，可以在裡面清除定時器、取消大的物件的引用等操作。注意：應避免呼叫setState() |
| shouldComponentUpdate() | 非必須 | shouldComponentUpdate(nextProps, nextState)，根據 nextProps 和 nextState 這兩個引數來判斷當前元件是否可以更新 |
| static getDerivedStateFromProps() | 非必須 | static getDerivedStateFromProps(props, state)，會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回一個物件來更新 state，如果返回 null 則不更新任何內容 |
| getSnapshotBeforeUpdate() | 非必須 |
getSnapshotBeforeUpdate(prevProps, prevState)在最近一次渲染輸出（提交到 DOM 節點）之前呼叫。它使得元件能在發生更改之前從 DOM 中捕獲一些資訊（例如，滾動位置）。此生命週期的任何返回值將作為引數傳遞給 componentDidUpdate() |
| getDerivedStateFromError() | 非必須 |
static getDerivedStateFromError(error)，會在後代元件丟擲錯誤後被呼叫，一般用於錯誤捕獲 |
| componentDidCatch() | 非必須 |
componentDidCatch(error, info)，會在後代元件丟擲錯誤後被呼叫，一般用於錯誤捕獲 |
過時的生命週期方法
| 方法 | 是否必須 | 說明 |
|---|---|---|
| UNSAFE_componentWillMount() | 非必須 | 改方法在 render() 之前呼叫，之前名為 componentWillMount。該名稱將繼續使用至 React 17 |
| UNSAFE_componentWillReceiveProps() | 非必須 | 父元件重新渲染時候會呼叫此方法，之前名為 componentWillReceiveProps。該名稱將繼續使用至 React 17 |
| UNSAFE_componentWillUpdate() | 非必須 | 當元件收到新的 props 或 state 時，會在渲染之前呼叫此方法，之前名為 componentWillUpdate。該名稱將繼續使用至 React 17 |