memo(Component, arePropsEqual?) 

使用 memo 將組件包裝起來(lái)，以獲得該組件的一個(gè) 記憶化 版本。通常情況下，只要該組件的 props 沒有改變，這個(gè)記憶化版本就不會(huì)在其父組件重新渲染時(shí)重新渲染。但 React 仍可能會(huì)重新渲染它：記憶化是一種性能優(yōu)化，而非保證。

import { memo } from 'react';
const SomeComponent = memo(function SomeComponent(props) {
  // ...
});

參數(shù)

• Component：要進(jìn)行記憶化的組件。memo 不會(huì)修改該組件，而是返回一個(gè)新的、記憶化的組件。它接受任何有效的 React 組件，包括函數(shù)組件和 forwardRef 組件。
• 可選參數(shù) arePropsEqual：一個(gè)函數(shù)，接受兩個(gè)參數(shù)：組件的前一個(gè) props 和新的 props。如果舊的和新的 props 相等，即組件使用新的 props 渲染的輸出和表現(xiàn)與舊的 props 完全相同，則它應(yīng)該返回 true。否則返回 false。通常情況下，你不需要指定此函數(shù)。默認(rèn)情況下，React 將使用 Object.is 比較每個(gè) prop。

返回值
memo 返回一個(gè)新的 React 組件。它的行為與提供給 memo 的組件相同，只是當(dāng)它的父組件重新渲染時(shí) React 不會(huì)總是重新渲染它，除非它的 props 發(fā)生了變化。

用法

當(dāng) props 沒有改變時(shí)跳過重新渲染
React 通常在其父組件重新渲染時(shí)重新渲染一個(gè)組件。你可以使用 memo 創(chuàng)建一個(gè)組件，當(dāng)它的父組件重新渲染時(shí)，只要它的新 props 與舊 props 相同時(shí)，React 就不會(huì)重新渲染它。這樣的組件被稱為 記憶化的（memoized）組件。

要記憶化一個(gè)組件，請(qǐng)將它包裝在 memo 中，使用它返回的值替換原來(lái)的組件：

const Greeting = memo(function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
});
export default Greeting;

React 組件應(yīng)該始終具有 純粹的渲染邏輯。這意味著如果其 props、state 和 context 沒有改變，則必須返回相同的輸出。通過使用 memo，你告訴 React 你的組件符合此要求，因此只要其 props 沒有改變，React 就不需要重新渲染。即使使用 memo，如果它自己的 state 或正在使用的 context 發(fā)生更改，組件也會(huì)重新渲染。

在此示例中，請(qǐng)注意 Greeting 組件在 name 更改時(shí)重新渲染（因?yàn)槟鞘撬?props 之一），但是在 address 更改時(shí)不會(huì)重新渲染（因?yàn)樗蛔鳛?props 傳遞給 Greeting）：

import { memo, useState } from 'react';
export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}
const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

更改Address，Geeting沒有重渲染。

更改name，Greeting重新渲染了

在每個(gè)地方都應(yīng)該添加 memo 嗎？

如果你的應(yīng)用像此站點(diǎn)一樣，大多數(shù)交互是粗略的（例如直接替換頁(yè)面或整個(gè)部分），那么通常不需要記憶化。另一方面，如果你的應(yīng)用更像是繪圖編輯器，大多數(shù)交互是細(xì)粒度的（例如移動(dòng)圖形），那么你可能會(huì)發(fā)現(xiàn)記憶化非常有用。

只有當(dāng)你的組件經(jīng)常使用完全相同的 props 重新渲染時(shí)，并且其重新渲染邏輯是非常昂貴的，使用 memo 優(yōu)化才有價(jià)值。如果你的組件重新渲染時(shí)沒有明顯的延遲，那么 memo 就不必要了。請(qǐng)記住，如果傳遞給組件的 props 始終不同，例如在渲染期間傳遞對(duì)象或普通函數(shù)，則 memo 是完全無(wú)用的。這就是為什么你通常需要在 memo 中同時(shí)使用 useMemo 和 useCallback。

在其他情況下將組件包裝在 memo 中是沒有任何好處的。這種做法也沒有什么明顯的危害，因此一些團(tuán)隊(duì)會(huì)選擇不考慮個(gè)別情況，并盡可能使用 memo。這種方法的缺點(diǎn)是代碼變得不易讀。此外，并不是所有的記憶化都是有效的：一個(gè)“總是新的”值足以破壞整個(gè)組件的記憶化。

實(shí)踐中，你可以通過遵循一些原則來(lái)使許多 memoization 變得不必要：

當(dāng)一個(gè)組件在視覺上包裹其他組件時(shí)，讓它 接受 JSX 作為子組件。這樣，當(dāng)包裝組件更新其自身狀態(tài)時(shí)，React 知道其子組件不需要重新渲染。
優(yōu)先使用局部狀態(tài)，并且不要將 狀態(tài)提升 到不必要的層級(jí)。例如，不要將短暫狀態(tài)（如表單數(shù)據(jù)和項(xiàng)元素是否 hover 狀態(tài)）保留在樹的頂部或全局狀態(tài)庫(kù)中。
保持你的 渲染邏輯純粹。如果重新渲染組件會(huì)導(dǎo)致問題或產(chǎn)生一些明顯的視覺瑕疵，則這是你組件中的 bug！修復(fù) bug 而不是添加 memoization。
避免 不必要的 Effect 來(lái)更新狀態(tài)。React 應(yīng)用中的大多數(shù)性能問題都是由于 Effect 引起的更新鏈，這些 Effect 會(huì)使你的組件一次又一次地重新渲染。
嘗試 從你的 Effect 中刪除不必要的依賴項(xiàng)。例如，與其使用 memoization，不如將某些對(duì)象或函數(shù)移動(dòng)到 Effect 內(nèi)部或組件外部，這通常更簡(jiǎn)單。
如果特定交互仍然感覺不流暢，請(qǐng) 使用 React 開發(fā)者工具 profiler 來(lái)查看哪些組件最需要 memoization，并在需要時(shí)添加 memoization。這些原則使你的組件更易于調(diào)試和理解，因此建議在任何情況下都遵循它們。從長(zhǎng)遠(yuǎn)來(lái)看，我們正在研究 自動(dòng)進(jìn)行細(xì)粒度 memoization，以解決這個(gè)問題。

當(dāng)組件的某個(gè) prop 是對(duì)象、數(shù)組或函數(shù)時(shí)，我的組件會(huì)重新渲染。

React 通過淺比較來(lái)比較舊的和新的 prop：也就是說，它會(huì)考慮每個(gè)新的 prop 是否與舊 prop 引用相等。如果每次父組件重新渲染時(shí)創(chuàng)建一個(gè)新的對(duì)象或數(shù)組，即使它們每個(gè)元素都相同，React 仍會(huì)認(rèn)為它已更改。同樣地，如果在渲染父組件時(shí)創(chuàng)建一個(gè)新的函數(shù)，即使該函數(shù)具有相同的定義，React 也會(huì)認(rèn)為它已更改。為了避免這種情況，可以簡(jiǎn)化 props 或在父組件中記憶化（memoize）props。
官網(wǎng)講解: memo

到此這篇關(guān)于React memo允許你的組件在 props 沒有改變的情況下跳過重新渲染的文章就介紹到這了,更多相關(guān)React 重新渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論