組件生命周期

生命周期圖譜

掛載

當(dāng)組件實(shí)例被創(chuàng)建并插入 DOM 中時(shí)，其生命周期調(diào)用順序如下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

注意：下述生命周期方法即將過時(shí)，應(yīng)避免使用它們：

• componentWillMount()

更新

當(dāng)組件的 props 或 state 發(fā)生變化時(shí)會觸發(fā)更新。組件更新的生命周期調(diào)用順序如下：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

注意：下述生命周期方法即將過時(shí)，應(yīng)避免使用它們：

• componentWillUpdate()
• componentWillReceiveProps()

卸載

當(dāng)組件從 DOM 中移除時(shí)會調(diào)用如下方法：

• componentWillUnmount()

錯(cuò)誤處理

當(dāng)渲染過程，生命周期，或子組件的構(gòu)造函數(shù)中拋出錯(cuò)誤時(shí)，會調(diào)用如下方法：

• static getDerivedStateFromError()
• componentDidCatch()

常用的生命周期方法

render()

render() 函數(shù)應(yīng)該為純函數(shù)，這意味著在不修改組件 state 的情況下，每次調(diào)用時(shí)都返回相同的結(jié)果，并且它不會直接與瀏覽器交互。

如需與瀏覽器進(jìn)行交互，需在 componentDidMount() 或其他生命周期方法中執(zhí)行你的操作，保持 render() 為純函數(shù)。

注意：如果 shouldComponentUpdate() 返回 false，則不會調(diào)用 render()

constructor()

constructor(props)

如果不初始化 state 或不進(jìn)行方法綁定則不需要為 React 組件實(shí)現(xiàn)構(gòu)造函數(shù)。

通常，在 React 中，構(gòu)造蛤?qū)賰H用于以下兩種情況：

• 通過給 this.state 復(fù)制對象來初始化內(nèi)部state
• 為事件處理函數(shù)綁定實(shí)例

要避免在構(gòu)造函數(shù)中引入任何副作用或訂閱。如有需要，應(yīng)在 componentDidMount() 中進(jìn)行操作。

componentDidMount()

componentDidMount() 會在組件掛載后（插入 DOM 樹中）立即調(diào)用。此處是網(wǎng)絡(luò)請求獲取數(shù)據(jù)的好地方。

如果在此處添加了訂閱，不要忘記在 componentWillUnmount() 里取消訂閱。

componentDidUpdate()

constructor(preProps, prevState, snapshot)

componentDidUpdate() 會在更新后被立即調(diào)用。首次渲染不會執(zhí)行此方法。

當(dāng)組件更新后，可以在此處對 DOM 進(jìn)行操作。如果你對更新后的 props 進(jìn)行了比較，也可以選擇在此處進(jìn)行網(wǎng)絡(luò)請求。（例如，當(dāng) props未發(fā)生變化時(shí)，則不會執(zhí)行網(wǎng)絡(luò)請求）

componentDidUpdate(prevProps) {
  // 典型用法（不要忘記比較 props）
  if(this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID)
  }
}

如果組件實(shí)現(xiàn)了 getSnapshotBeforeUpdate() 生命周期（不常用），則它的返回值將作為 componentDidUpdate() 的第三個(gè)參數(shù) "snapshot" 參數(shù)傳遞。否則此參數(shù)將為 undefined。

注意：如果 shouldComponentUpdate() 返回值為 false，則不會調(diào)用 componentDidUpdate()。

componentWillUnmount()

componentWillUnmount() 會在組件卸載及銷毀之前直接調(diào)用。在此方法中執(zhí)行必要的清理操作，例如，清除 timer，取消網(wǎng)絡(luò)請求或清除在 componentDidMount() 中創(chuàng)建的訂閱等。

componentWillUnmount() 中不應(yīng)調(diào)用 setState(), 因?yàn)樵摻M件將永遠(yuǎn)不會重新渲染。組件實(shí)例卸載后，將永遠(yuǎn)不會再掛載它。

不常用的生命周期方法

shouldComponentUpdate()

shouldComponentUpdate(nextProps, prevState)

此方法僅作為性能優(yōu)化的方式而存在。當(dāng) props 或 state 發(fā)生變化時(shí)，shouldComponentUpdate() 會在渲染執(zhí)行之前被調(diào)用。默認(rèn)返回true。首次渲染或使用 forceUpdate() 時(shí)不會調(diào)用該方法。

static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps 會在調(diào)用 render 方法之前調(diào)用，并且在初試掛載及后續(xù)更新時(shí)都會被調(diào)用。它應(yīng)返回一個(gè)對象來更新 state，如果返回 null 則不更新任何內(nèi)容。

此方法適用于 state 的值在任何時(shí)候都取決于 props。

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節(jié)點(diǎn)）之前調(diào)用。它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息（例如，滾動(dòng)位置）。此聲明周期的任何返回值都將作為參數(shù)傳遞給 componentDidUpdate()

static getDerivedStateFromError()

static getDerivedStateFromError(error)

此生命周期會在后代組件拋出錯(cuò)誤后被調(diào)用。它將拋出的錯(cuò)位作為參數(shù)，并返回一個(gè)值以更新 state，讓組件捕獲樹中未處理的 JavaScript 錯(cuò)誤并展示降級 UI。

componentDidCatch(error, info)

此生命周期在后代組件拋出錯(cuò)誤后被調(diào)用。它接收兩個(gè)參數(shù)：

1. error - 拋出的錯(cuò)誤
2. info - 帶有 componentStack key 的對象，其中包含有關(guān)組件引發(fā)錯(cuò)誤的棧信息。

componentDidCatch() 會在"提交"階段被調(diào)用，因此允許執(zhí)行副作用。

過時(shí)的生命周期方法

這些方法仍然有效，但是不建議在新代碼中使用它們。

• componentWillMount()
• componentWillReceiveProps()
• componentWillUpdate()