摘要：同步渲染的痛點(diǎn)當(dāng)應(yīng)用的組件樹特別龐大時(shí)，由于是單線程的，重新渲染一旦開始，中間不會(huì)停，如果這時(shí)候用戶去操作，比如輸入，點(diǎn)擊按鈕，此時(shí)頁面是沒有響應(yīng)的。

constructor

如果你不初始化狀態(tài)，也不綁定方法，那么你就不需要為React組件實(shí)現(xiàn)構(gòu)造函數(shù)。在這里初始化狀態(tài)可以直接對(duì)this.state賦值，在這里使用props時(shí)，應(yīng)當(dāng)通過this.props使用；如果組件內(nèi)定義的方法不是采用箭頭函數(shù)默認(rèn)綁定到組件實(shí)例上時(shí)，調(diào)用時(shí)應(yīng)該用bind手動(dòng)綁定。

componentWillMount（將要廢棄）

在react17版本前有效的生命周期鉤子，不能與新版鉤子混用（componentWillRecevieProps、componentWillUpdate也是如此）；
有一種常見的誤區(qū)是在componentWillMount中請(qǐng)求數(shù)據(jù)可以避免第一次empty render，但實(shí)際中render在componentWillMount后立即執(zhí)行，如果componentWillMount拉取的數(shù)據(jù)不能立即得到，那么二次渲染依然無法避免，這種情況下推薦在componentDidMount中請(qǐng)求數(shù)據(jù)。
所以總的來說沒啥用處。

render

render()方法是類組件唯一必須的方法，在該鉤子內(nèi)，將React JSX 渲染為DOM節(jié)點(diǎn)。
render()函數(shù)應(yīng)該是純的，意味著不應(yīng)該改變組件的狀態(tài)，其每次調(diào)用都應(yīng)返回相同的結(jié)果，同時(shí)它不會(huì)直接和瀏覽器交互

componentDidMount

在該鉤子內(nèi)，render生成的DOM節(jié)點(diǎn)掛載到DOM樹中，在這里你可以通過ref取到DOM節(jié)點(diǎn)，有些需求下，可能需要DOM節(jié)點(diǎn)掛載后才能取到相應(yīng)的屬性，例如DOM節(jié)點(diǎn)的尺寸等，你可以立即調(diào)用setState()。它將會(huì)觸發(fā)一次額外的渲染，但是它將在瀏覽器刷新屏幕之前發(fā)生。這保證了在此情況下即使render()將會(huì)調(diào)用兩次，用戶也不會(huì)看到中間狀態(tài)。

componentWillUnmount

componentWillUnmount()緊挨著在組件被卸載和銷毀之前調(diào)用?？梢栽谠摲椒ɡ锾幚砣魏伪匾那謇砉ぷ?，例如解綁定時(shí)器，取消網(wǎng)絡(luò)請(qǐng)求，清理任何在componentDidMount環(huán)節(jié)創(chuàng)建的訂閱。

上述介紹的基本生命周期鉤子是上圖的左半部分，走完了一次初始渲染的流程，但React組件嵌套復(fù)用，當(dāng)父組件更新或者組件自身狀態(tài)更新觸發(fā)子組件重新渲染時(shí)，合理的使用上圖右半部分的生命周期鉤子可以有效提升性能。

componentWillReceiveProps(nextProps)（將要廢棄）

componentWillReceiveProps()在裝載了的組件接收到新屬性前調(diào)用?？赡墚?dāng)接收到新屬性后，通過if比較新舊Props不同，想要通過this.setState()來更新組件的狀態(tài)。

shouldComponentUpdate(nextProps, nextState)

當(dāng)接收到新屬性或狀態(tài)時(shí)，shouldComponentUpdate() 在渲染前被調(diào)用。默認(rèn)為true。該方法在初始化渲染或當(dāng)使用forceUpdate()時(shí)并不會(huì)被調(diào)用。
適用場(chǎng)景是：你想在某些狀態(tài)或?qū)傩宰兓瘯r(shí)，通過this.props和nextProps以及this.state 和 nextState比較，來判斷是否需要重新渲染該組件，return fasle 不渲染，默認(rèn)為true。不能setState。
有內(nèi)建的React.PureComponent代替手寫shouldComponentUpdate()。PureComponent 對(duì)屬性和狀態(tài)執(zhí)行淺比較，因而降低你略過必要更新的機(jī)會(huì)。
但如果你需要更精細(xì)的控制，那就自定義shouldComponentUpdate吧。
但是當(dāng)你的state或props是嵌套很深的引用類型時(shí)，容易由于淺比較而出錯(cuò)，而React文檔說我們不推薦做深相等檢測(cè)，或使用JSON.stringify()在shouldComponentUpdate()中，這是非常無效率的會(huì)傷害性能。所以你最好設(shè)計(jì)好自己的數(shù)據(jù)結(jié)構(gòu)，不要讓數(shù)據(jù)嵌套太深。

componentWillUpdate(nextProps, nextState)

類似于componentWillMount，在nextProps, nextState生效前最后的一次準(zhǔn)備機(jī)會(huì)，可以讀取DOM屬性，為componentDidUpdate作準(zhǔn)備（使用場(chǎng)景少）。不能setState。

componentDidUpdate

組件更新后觸發(fā)，類似于componentDidMount的作用，可以在這里操作DOM，發(fā)起請(qǐng)求等。

參考鏈接：
React Lifecycle Methods- how and when to use them
React組件生命周期小結(jié)

static getDerivedStateFromProps(nextProps, prevState)

與舊的生命周期圖比較可以看出，getDerivedStateFromProps處于原來的componentWillMount與componentWillReceiveProps位置，而且this.setState()以及this.forceUpdate()也會(huì)觸發(fā)該鉤子。
該鉤子的主要作用是為了替代componentWillReceiveProps作用。

// Before
class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
  };
  componentWillReceiveProps(nextProps) {
    if (this.props.currentRow !== nextProps.currentRow) {
      this.setState({
        isScrollingDown:
          nextProps.currentRow > this.props.currentRow,
      });
    }
  }
}
// After
class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.currentRow !== prevState.lastRow) {
      return {
        isScrollingDown:
          nextProps.currentRow > prevState.lastRow,
        lastRow: nextProps.currentRow,
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

與原有鉤子相比，getDerivedStateFromProps是一個(gè)靜態(tài)方法，無法訪問組件實(shí)例，如此限制了其使用范圍，防止不熟練的開發(fā)者自由發(fā)揮導(dǎo)致各種bug。該鉤子主要作用可以概括為接收props來改變state。

可以發(fā)現(xiàn)在使用getDerivedStateFromProps時(shí)，我們?cè)趕tate中多花了一個(gè)變量lastRow來保存prevProps，為什么設(shè)計(jì)鉤子的時(shí)候不在參數(shù)值加入prevProps呢？ 官方文檔的解釋是：1.首次渲染也會(huì)觸發(fā)getDerivedStateFromProps，這意味著每次都需要對(duì)prevProps進(jìn)行空置檢測(cè)，麻煩；2.不將prevProps傳入是為了節(jié)省內(nèi)存。

getSnapshotBeforeUpdate(prevProps, prevState)

取代componenWillUpdate功能。
getSnapshotBeforeUpdate在最新的渲染輸出提交給DOM前將會(huì)立即調(diào)用。它讓你的組件能在當(dāng)前的值可能要改變前獲得它們。這一生命周期返回的任何值將會(huì) 作為參數(shù)被傳遞給componentDidUpdate()。

class ScrollingList extends React.Component {
  listRef = null;

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the current height of the list so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      return this.listRef.scrollHeight;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we"ve just added new items.
    // Adjust scroll so these new items don"t push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      this.listRef.scrollTop +=
        this.listRef.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      

        {/* ...contents... */}
      
    );
  }

  setListRef = ref => {
    this.listRef = ref;
  };
}

static getDerivedStateFromError()與componentDidCatch()

錯(cuò)誤處理。。。
render phase 里產(chǎn)生異常的時(shí)候， 會(huì)調(diào)用 getDerivedStateFromError;

在 commit phase 里產(chǎn)生異常大的時(shí)候， 會(huì)調(diào)用 componentDidCatch。

componentDidCatch 是不會(huì)在服務(wù)器端渲染的時(shí)候被調(diào)用的 而getDerivedStateFromError 會(huì)

主要是為了適應(yīng)將要推出的異步渲染，其次是避免之前生命周期鉤子的濫用。

React Fiber 是在 v16 的時(shí)候引入的一個(gè)全新架構(gòu)， 旨在解決異步渲染問題，但v16并沒有開啟。
同步渲染的痛點(diǎn)：當(dāng)應(yīng)用的組件樹特別龐大時(shí)，由于javaScript是單線程的，重新渲染一旦開始，中間不會(huì)停，如果這時(shí)候用戶去操作， 比如輸入， 點(diǎn)擊按鈕， 此時(shí)頁面是沒有響應(yīng)的。 等更新完了， 你之前的那些輸入就會(huì)啪啪啪一下子出來了。函數(shù)調(diào)用棧如圖所示：

因?yàn)镴avaScript單線程的特點(diǎn)，每個(gè)同步任務(wù)不能耗時(shí)太長(zhǎng)，不然就會(huì)讓程序不會(huì)對(duì)其他輸入作出相應(yīng)，React的更新過程就是犯了這個(gè)禁忌，而React Fiber就是要改變現(xiàn)狀。

Fiber 的做法是：分片。
把一個(gè)很耗時(shí)的任務(wù)分成很多小片，每一個(gè)小片的運(yùn)行時(shí)間很短，雖然總時(shí)間依然很長(zhǎng)，但是在每個(gè)小片執(zhí)行完之后，都給其他任務(wù)一個(gè)執(zhí)行的機(jī)會(huì)，這樣唯一的線程就不會(huì)被獨(dú)占，其他任務(wù)依然有運(yùn)行的機(jī)會(huì)。 而維護(hù)每一個(gè)分片的數(shù)據(jù)結(jié)構(gòu)， 就是Fiber。
用一張圖來展示Fiber 的碎片化更新過程

在React Fiber中，一次更新過程會(huì)分成多個(gè)分片完成，所以完全有可能一個(gè)更新任務(wù)還沒有完成，就被另一個(gè)更高優(yōu)先級(jí)的更新過程打斷，這時(shí)候，優(yōu)先級(jí)高的更新任務(wù)會(huì)優(yōu)先處理完，而低優(yōu)先級(jí)更新任務(wù)所做的工作則會(huì)完全作廢，然后等待機(jī)會(huì)重頭再來。

因?yàn)橐粋€(gè)更新過程可能被打斷，所以React Fiber一個(gè)更新過程被分為兩個(gè)階段： render phase and commit phase.（可以從上文的生命周期圖中看到）

因?yàn)榈谝浑A段的過程會(huì)被打斷而且“重頭再來”，就會(huì)造成意想不到的情況。

比如說，一個(gè)低優(yōu)先級(jí)的任務(wù)A正在執(zhí)行，已經(jīng)調(diào)用了某個(gè)組件的componentWillUpdate函數(shù)，接下來發(fā)現(xiàn)自己的時(shí)間分片已經(jīng)用完了，于是冒出水面，看看有沒有緊急任務(wù)，哎呀，真的有一個(gè)緊急任務(wù)B，接下來React Fiber就會(huì)去執(zhí)行這個(gè)緊急任務(wù)B，任務(wù)A雖然進(jìn)行了一半，但是沒辦法，只能完全放棄，等到任務(wù)B全搞定之后，任務(wù)A重頭來一遍，注意，是重頭來一遍，不是從剛才中段的部分開始，也就是說，componentWillUpdate函數(shù)會(huì)被再調(diào)用一次。

在現(xiàn)有的React中，每個(gè)生命周期函數(shù)在一個(gè)加載或者更新過程中絕對(duì)只會(huì)被調(diào)用一次；在React Fiber中，不再是這樣了，第一階段中的生命周期函數(shù)在一次加載和更新過程中可能會(huì)被多次調(diào)用！。

總而言之就是：
render phase 可以被打斷， 大家不要在此階段做一些有副作用的操作，可以放心在commit phase 里做。

然后就是生命周期的調(diào)整， react 把你有可能在render phase 里做的有副作用的函數(shù)都改成了static 函數(shù)， 強(qiáng)迫開發(fā)者做一些純函數(shù)的操作。

全面了解 React 新功能: Suspense 和 Hooks