昨天講到了 class based component 可以透過 shouldComponentUpdate 比較前一次 props 與 前一次 state 來決定要不要重新渲染，然而生命週期函式是只有 class based component 才有的啊，那 functional 的元件要怎麼做到一樣的效果呢？以往可能需要將元件改成只有一個 render function 的 class 元件，再改成 pureComponent 或實作 shouldComponentUpdate ，但如今我們多了 React.memo 這個 HOC 可以在 functional 中使用囉。

使用 React.memo

// 使用前
const Demo = ({ children }) => <div>{children}</div>;

// 使用後
const Demo = React.memo(({ children }) => <div>{children}</div>);

使用上非常直覺簡單

React.memo(Component, areEqual)

其實 React.memo 也可以自己決定重新渲染條件，一切的關鍵都在第二個參數中。
但是規則卻與 shouldComponentUpdate 有些許不同：

• shouldComponentUpdate: 若 return true 就進行 re-render，否則不會 re-render。
• areEqual: 若 return true 代表 props 相同，不進行 re-render，否則皆會 re-render。

const Demo = React.memo(
  ({ children }) => <div>{children}</div>,
  (prevProps, nextProps) => {
    return false;  // 注意 true 在這代表因為 props 相同所以不會重新渲染
  });

明天將為大家介紹跟 React.memo 名字十分相似的 useMemo，讓我們對於 React 效能優化有更全面的了解。