[譯]如何使用React生命週期方法

原文：How to use React Lifecycle Methods

React 生命週期

大致上分三類

• Mount
• Update
• Unmount

Mount

• constructor()
• componentWillMount()
• render()
• componentDidMount()

Update

• componentWillReceiveProps() / static getDerivedStateFromProps()
• shouldComponentUpdate()
• componentWillUpdate() / getSnapshotBeforeUpdate()
• render()
• componentDidUpdate()

Unmount

• componentWillUnmount()

生命週期方法

componentWillMount（即將移除）

componentWillMount()
複製代碼

當 React 渲染一個組件的是你，首先進入該方法。

Note：componentWillMount()是惟一一個在render()以前調用的生命週期方法。所以是在服務端渲染中惟一被調用的方法。

由於componentWillMount()將被刪除，因此官方推薦使用constructor()替代該方法

**Update：**該方法應該在新的代碼中避免使用

State

能夠在該方法中使用this.setState()可是不必定觸發從新渲染。

componentDidMount

componentDidMount()
複製代碼

當該方法被調用時候，React 已經渲染了組件而且將組件插入 DOM。所以若有有任何依賴於 DOM 的初始化，應該放在這裏。

State

該方法中可使用this.setState()方法，它將觸發從新渲染。

Use Cases

• fetch data
• 依賴 DOM 初始化
• 添加事件監聽

componentWillReceiveProps（即將移除）

componentWillReceiveProps(nextProps)
複製代碼

當組件接收到新的props，該方法會首先被調用，可是須要注意一點，即便props並無發生改變，該方法也會被調用，因此使用該方法的時候要確保比較this.props和nextProps，避免沒必要要的渲染。

Update：componentWillReceiveProps將被移除，使用新的static getDerivedStateFromProps代替。

static getDerivedStateFromProps（新增）

static getDerivedStateFromProps(props, state)
複製代碼

每次render都會調用該方法——即便props沒有發生變化。因此要謹慎使用。

shouldComponentUpdate

shouldComponentUpdate(nextState, nextProps)
複製代碼

有些時候須要避免沒必要要的渲染，可使用該方法。返回false意味着 React 不執行componentWillUpdate()，render()，componentDidUpdate()。

該方法在初始化時候不執行。

**Note：**根據 React 文檔，React 可能將shouldComponentUpdate視作提示而不是嚴格的根據它的返回結果決定是否執行，也就是說可能出現shouldComponentUpdate返回false，可是仍是發生從新渲染。

State

在該方法中不能夠設置setState。

Use Case

如前所述，該方法可能有有問題。React 官方提供了另外一個解決辦法，因此若是發現某個組件慢，可使用React.PureComponent替代React.component，它將對props和state提供一個淺層對照。

componentWillUpdate（即將移除）

componentWillUpdate(nextProps, nextState)
複製代碼

該方法在被渲染前調用。shouldComponentUpdate在新的props進入組件或者state改變的時候調用。

該方法在初始渲染時候不被調用。

Update：shouldComponentUpdate即將被移除。

State

在該方法中不能調用setState。

Use Cases

shouldComponentUpdate方法在render()前會被準確調用，因此在該方法中作任何跟 DOM 相關的操做是不合適的，由於很快會過時。

常見的用例有：

• 根據state的變化設置變量
• 派發事件
• 開始動畫

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)
複製代碼

該方法在 React 16.3 被添加而且它配合componentDidUpdate。該方法應該覆蓋了舊方法shouldComponentUpdate的全部用例。

getSnapshotBeforeUpdate在元素被渲染並寫入 DOM 以前調用，這樣，你在 DOM 更新前捕獲 DOM 信息（例如：滾動位置）。

應該返回一個snapshot值或null，不管返回什麼，shouldComponentUpdate均可以接收到snapshot參數。

Use Cases

若是想要得到一個 list 或者一個聊天窗口中的滾動位置，能夠在getSnapshotBeforeUpdate中取到這些信息。而後將滾動信息做爲snapshot值返回。這容許在更新DOM後在componentDidUpdate中設置正確的滾動位置。

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)
複製代碼

React 更新組件後，調用componentDidUpdate。該方法在初始渲染時候不會被調用。

Use Cases

若是組件更新後須要操做 DOM，可使用該方法。

componentWillUnmount

componentWillUnmount()
複製代碼

在卸載，銷燬組件以前調用該方法。

State

在卸載組件時候不能設置 State

Use Cases

使用該方法清理 actions。

• 刪除在componentDidMount或其餘地方添加的事件監聽
• 斷開網絡請求
• 清空計時器
• 清理在componentDidMount中建立的 DOM 元素