React.memo 及其用途

1. 什麼是 React.memo
2. React.memo 做什麼

React 很受歡迎，因為它允許開發人員構建動態應用程式。

然而，React 元件的預設行為是低效的。該庫包括用於類元件的 PureComponent 和用於功能元件的 React.memo HOC 以解決此問題。

這些解決方案可以減少元件更新的次數，並使 React 應用程式更加高效。本文將探討 React.memo 的作用以及如何使用它。

什麼是 React.memo

React.memo 是一個高階元件，它包裹了 React 中的普通函式元件。

如果元件沒有任何副作用並且使用相同的 props 渲染相同的輸出，React.memo 可以提高元件的速度和效能。

包裹在 React.memo 高階元件中的應用程式及其所有子元件僅在 props 更改時才會重新渲染。如果本地狀態或上下文發生變化，樹中的子元件也將重新渲染。

這是包裝在 React.memo HOC 中的元件示例：

const App = React.memo(() => {
  return <p>Hello World</p>;
});

App 元件下的任何元件樹也會受到影響。這是 playcode 的連結。

React.memo 做什麼

React 中的所有元件都有一個預設的 shouldComponentUpdate() 方法，每次它們自己或父母的 props 發生變化時都會觸發重新渲染。

在 React.memo HOC 中包裝一個元件可以改變這個預設行為。包裝後，shouldComponentUpdate() 方法將更改，並且元件及其所有子元件僅在本地狀態或 props 更改時才會重新渲染。

該方法將對狀態和 props 進行淺層比較，以確定何時重新渲染。如果你看一下生命週期方法被呼叫的順序，shouldComponentUpdate() 總是在渲染方法之前，因為它應該。

所以每次 props 改變時都會呼叫 shouldComponentUpdate()。但是只有在淺層比較確定它們的 props 發生變化時，元件和子元件才會重新渲染。

效能提升

通過減少不必要的更新，記憶（將 React 元件包裝在 React.memo HOC 中）可以顯著提高應用程式的效能。

你可以將元件包裝在 React.memo 中，或者你可以選擇性地包裝元件樹的某些分支。你可以使用分析工具來查詢你的應用程式中是否存在足夠嚴重的低效率以保證使用 React.memo。

根據經驗，對 props 物件進行淺層比較總是比呼叫 React.createElement() 和比較整個元件樹要便宜。

但是，如果你的元件有深度比較的 props，那麼 React.memo 的淺比較是不夠的。此外，如果你的元件接收並顯示 children 屬性值，則此高階元件不起作用。