類組件生命周期方法

• constructor

  在類組件掛載的時(shí)候調(diào)用，用于構(gòu)建一個(gè)類組件實(shí)例。

  在構(gòu)建類組件實(shí)例的時(shí)候， 會(huì)先執(zhí)行基類構(gòu)造函數(shù)( React.Component ) 使用父組件傳入的 props 來初始化 props 屬性， 然后執(zhí)行自定義構(gòu)造函數(shù)來初始化 state 和 事件綁定。 如果類組件不需要初始化 state 和 事件綁定，就不需要自定義構(gòu)造函數(shù)。

  父組件的 constructor 先觸發(fā)， 子組件的 constructor 后觸發(fā)。兄弟組件， constructor 按組件位置的先后順序按序觸發(fā)。

• componentWillMount

  掛載階段， 組件實(shí)例構(gòu)建完成(props、state 屬性初始化完成)以后，render 方法執(zhí)行之前執(zhí)行。

  如果類組件提供了 getDerivedStateFromProps 方法， componentWillMount 不會(huì)觸發(fā)，會(huì)拋出警告。

  父組件的 componentWillMount 先觸發(fā)， 子組件的 componentWillMount 后觸發(fā)。兄弟組件， componentWillMount 按組件位置的先后順序按序觸發(fā)。

• static getDerivedStateFromProps(props, state)

  掛載(mount)/更新(update)階段，在類組件實(shí)例的 state、props 屬性初始化(更新)完成以后，render 方法執(zhí)行以前執(zhí)行。

  執(zhí)行時(shí)， 會(huì)傳入當(dāng)前 props 和 state，返回一個(gè)新的 state 來更新 state。

  如果類組件實(shí)例沒有定義 state 屬性， 使用 getDerivedStateFromProps 會(huì)拋出警告。

  getDerivedStateFromProps 返回的 state 會(huì)和組件原來的 state 做合并更新處理(Object.assign)。如果返回 null 或者沒有返回值， 會(huì)拋出警告。

  父組件的 getDerivedStateFromProps 先觸發(fā)， 子組件的 getDerivedStateFromProps 后觸發(fā)。兄弟組件， getDerivedStateFromProps 按組件位置的先后順序按序觸發(fā)。

  getDerivedStateFromProps 先于 shouldComponentUpdate 觸發(fā)，即只要組件掛載、組件更新、父組件更新， 都會(huì)觸發(fā)。

• shouldComponentUpdate(newProps, newState, newContext)

  更新階段，如果組件不是強(qiáng)制更新且定義了 shouldComponentUpdate 方方法， shouldComponentUpdate 方法會(huì)觸發(fā)。

  shouldComponentUpdate 執(zhí)行時(shí)， 需要傳入 newrops、newState、newContext 和 組件實(shí)例原來的 props、state、context 做比較，然后根據(jù)比較結(jié)果返回一個(gè) boolean 類型的值。

  如果返回 false， 組件不需要更新， componentWillUpdate、 render 、componentDidUpdate 都不會(huì)觸發(fā)； 如果返回 true， 組件需要更新， componentWillUpdate、render、componentDidUpdate 都會(huì)觸發(fā)。

  PureComponent 有內(nèi)置的 shouldComponentUpdate， 會(huì)對(duì)新舊 props、 state 做淺層比較。如果 props、state 的結(jié)構(gòu)比較復(fù)雜， 比較結(jié)果可能會(huì)不準(zhǔn)確。

  如果需要強(qiáng)制更新， shouldComponentUpdate 不會(huì)觸發(fā)。

  父組件的 shouldComponentUpdate 先觸發(fā)， 子組件的 shouldComponentUpdate 后觸發(fā)。兄弟組件， componentWillUpdate 按組件位置的先后順序按序觸發(fā)。

• componentWillUpdate

  更新階段，在獲取 newProps、newState、newContext 以后，組件實(shí)例的 props、state、 context 更新以及render 方法執(zhí)行之前執(zhí)行。

  如果類組件提供了 getDerivedStateFromProps 方法， componentWillUpdate 不會(huì)觸發(fā)，會(huì)拋出警告。

  父組件的 componentWillUpdate 先觸發(fā)， 子組件的 componentWillUpdate 后觸發(fā)。兄弟組件， componentWillUpdate 按組件位置的先后順序按序觸發(fā)。

• componentWillReceiveProps(newProps, newContext)

  更新階段， 如果子組件的 props(或者 context) 發(fā)生變化且定義了 coponentWillReceiveProps， 會(huì)觸發(fā) componentWillReveiveProps 的執(zhí)行。

  componentWillReceiveProps 在獲取 newProps、newState、newContext 以后，組件實(shí)例的 props、state、 context 更新以及 render 方法執(zhí)行之前執(zhí)行。

  如果類組件提供了 getDerivedStateFromProps 方法， componentWillReceiveProps 不會(huì)觸發(fā)，會(huì)拋出警告。

  componentWillReceiveProps 先于 shouldComponentUpdate、 componentWillUpdate 執(zhí)行。

  父組件的 componentWillReceiveProps 先觸發(fā)， 子組件的 componentWillReceiveProps 后觸發(fā)。兄弟組件， componentWillReceiveProps 按組件位置的先后順序按序觸發(fā)。

  只有子組件的 props、 context 發(fā)生變化， 才會(huì)觸發(fā) componentWillReceiveProps。 通過 setState 觸發(fā)子組件更新時(shí)， 不會(huì)觸發(fā) componentWillReceiveProps。

  在 componentWillReceiveProps 中修改 state ，不要直接修改，要使用 setState 修改， 否則會(huì)拋出警告。

• render

  將類組件 template 轉(zhuǎn)化為一顆 react element tree。

  在掛載階段肯定會(huì)觸發(fā)。在更新階段，如果是強(qiáng)制更新或者沒有定義 shouldComponentUpdate， 會(huì)觸發(fā)；如果不是強(qiáng)制更新且定義了 sholdComponentUpdate， 會(huì)根據(jù) shouldComponentUpdate 的返回值來決定是否觸發(fā)，false 不觸發(fā)， true 觸發(fā)。

• componentDidMount

  掛載階段， 整個(gè) react 應(yīng)用對(duì)應(yīng)的 template 已經(jīng)轉(zhuǎn)化為 dom 節(jié)點(diǎn)， 并添加到容器 dom 節(jié)點(diǎn)以后調(diào)用。

  子組件的 componentDidMount 先觸發(fā)， 父組件的 componentDidMount 后觸發(fā)。兄弟組件， componentDidMount 按組件位置的先后順序按序觸發(fā)。

  componentDidMount 觸發(fā)的時(shí)候， 可以操作 dom 節(jié)點(diǎn)， ref 也已經(jīng)初始化成功。

• getSnapshotBeforeUpdate(preProps, prevState)

  更新階段調(diào)用。此時(shí)整個(gè) react 應(yīng)用對(duì)應(yīng)的 template 已經(jīng)轉(zhuǎn)化為 dom 節(jié)點(diǎn)， 但是還沒有添加到容器 dom 節(jié)點(diǎn)中。

  getSnapshotBeforeUpdate 的返回值會(huì)作為 componentDidUpdate 的第三個(gè)參數(shù)。

  getSnapshotBeforeUpdate 先于 componentDidUpdate 執(zhí)行。

  子組件的 getSnapshotBeforeUpdate 先觸發(fā)， 父組件的 getSnapshotBeforeUpdate 后觸發(fā)。兄弟組件， getSnapshotBeforeUpdate 按組件位置的先后順序按序觸發(fā)。

  componentDidUpdate 觸發(fā)的時(shí)候， 不可以操作新的 dom 節(jié)點(diǎn)。

• componentDidUpdate(prevProps, prevState, snapshot)

  更新階段， 整個(gè) react 應(yīng)用對(duì)應(yīng)的 template 已經(jīng)轉(zhuǎn)化為 dom 節(jié)點(diǎn)， 并添加到容器 dom 節(jié)點(diǎn)以后調(diào)用。

  觸發(fā)的時(shí)候， 會(huì)傳入 oldProps、 oldState。

  子組件的 componentDidUpdate 先觸發(fā)， 父組件的 componentDidUpdate 后觸發(fā)。兄弟組件， componentDidUpdate 按組件位置的先后順序按序觸發(fā)。

  componentDidUpdate 觸發(fā)的時(shí)候， 可以操作新的 dom 節(jié)點(diǎn)， ref 也已經(jīng)初始化成功。

  不要在 componentDidUpdate 直接使用 setState，否則會(huì)導(dǎo)致死循環(huán)。

• componentWillUnmount

  更新階段， 組件卸載及銷毀之前直接調(diào)用。

  調(diào)用時(shí)，組件對(duì)應(yīng)的 dom 節(jié)點(diǎn)還沒有移除。

  componentWillUnmount 觸發(fā)以后， componentDidiUpdate 就不會(huì)觸發(fā)了。