render階段做了什麼

通過React.CreateElement，生成新的state和props，得到新的element物件。接下來，會對比這一次和上一次渲染的Virtual DOM，只在真正的DOM樹中修改差別的部分。

控制render的方法

主要通過兩種方式：

• 從自身控制是否render。如shouldComponent和PureComponent。
• 從父元件直接隔斷子元件的渲染。如通過memo，快取element物件。

方式一：自身控制

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate返回一個布林值，告訴元件需不需要繼續這次更新。shouldComponentUpdate返回true，則繼續更新，呼叫render函式；返回false，則停止更新，不呼叫render函式。

PureComponent

當開發類元件選擇了繼承 PureComponent，會通過內部的shouldComponentUpdate淺比較 state 和 props 是否相等。

React.memo(Component,compare)

引數說明：

• Component是元件本身
• 第二個引數 返回 true 元件不渲染 ， 返回 false 元件重新渲染。和 shouldComponentUpdate 相反。
• 當二個引數 compare 不存在時，會用淺比較處理 props ，相當於僅比較 props 版本的 pureComponent 。
• 同樣適合類元件和函式元件。

方式二：隔斷自元件渲染，快取物件

useMemo(create,deps)

• 返回一個 memoized 值。
• 第一個引數為一個函式，函式的返回值作為快取值.
• 第二個引數為一個數組，存放當前 useMemo 的依賴項。

useMemo 會記錄上一次執行 create 的返回值，並把它繫結在函式元件對應的 fiber 物件上，只要元件不銷燬，快取值就一直存在，但是 deps 中如果有一項改變，就會重新執行 create ，返回值作為新的值記錄到 fiber 物件上。

useMemo應用場景

• 可以快取 element 物件，從而達到按條件渲染元件，優化效能的作用。
• 如果元件中不期望每次 render 都重新計算一些值,可以利用 useMemo 把它快取起來。
• 把函式和屬性快取起來, 配合hooks使用。