React組件何時從新渲染？如何作性能優化？

本文只討論函數式組件，由於React再也不建議使用class component。

React組件何時從新渲染

在線demo：

• 當Parent re-render時，Child也會re-render，除非如下2種狀況之一發生：

  • <Child/>這個jsx element對象與上次渲染時相同（同一個對象引用）。

  • Child組件被React.memo裝飾，而且傳給Child組件的props與上次渲染相同。

    • 這種狀況能夠理解爲React.memo幫咱們返回了上次渲染時使用的<Child/>jsx element對象。
• 當Child的狀態更新而且re-render的時候，Parent不會re-render，Child的兄弟組件固然也不會re-render，只有Child以及它的後裔組件會re-render。
• 若是經過setState設置的新state與當前state相同，則不會觸發re-render。(bail out)

如何作性能優化

性能優化小竅門：

• 使用React.memo裝飾組件，使得它在props相同的時候不從新渲染（它下面的子樹也不會從新渲染）。

• 使用React.usememo來緩存計算結果、或者jsx element。它有2個方面的做用：

  • 一方面，可以避免重複計算。當依賴與上次相同的時候，計算函數不會被調用，而是直接取上次緩存的計算結果。
  • 另外一方面，能夠用來避免子組件的re-render。前面已經說了，若是<Child/>這個jsx element對象與上次渲染是同一個對象，那麼Child就不會被從新渲染（它的render函數不會被調用）。所以，Parent可使用React.usememo來拿到上次渲染時使用的<Child/>jsx element對象，避免它從新渲染。