介紹

forwardRef 和 memo 是 React 中用于性能優(yōu)化和組件復(fù)用的兩個(gè)高階函數(shù)。

forwardRef

forwardRef：通常情況下，父組件通過(guò) ref 屬性傳遞給子組件的引用只能是 DOM 元素或類(lèi)組件的實(shí)例。但有時(shí)候我們希望將 ref 傳遞給函數(shù)組件內(nèi)部的某個(gè)具體元素或組件，這時(shí)就可以使用 forwardRef。

forwardRef 可以傳遞一個(gè)回調(diào)函數(shù)來(lái)獲取從父組件傳遞過(guò)來(lái)的 ref，并將其傳遞給內(nèi)部的某個(gè)特定元素或組件。這樣，在父組件中使用 ref 引用子組件時(shí)，實(shí)際上獲取到的是子組件內(nèi)部指定的元素或組件。

const MyComponent = React.forwardRef((props, ref) => (
  <div ref={ref}>
    {/* 組件內(nèi)容 */}
  </div>
));

舉個(gè)例子

const ParentComponent = () => {
  const childRef = useRef();

  useEffect(() => {
    console.log(childRef.current); // 子組件內(nèi)指定的元素或組件
  }, []);

  return (
    <div>
      <MyComponent ref={childRef} />
    </div>
  );
};

memo

memo：memo 是用于優(yōu)化函數(shù)組件的渲染性能的高階函數(shù)。它可以包裹一個(gè)函數(shù)組件，并返回一個(gè)經(jīng)過(guò)優(yōu)化的組件。

memo 會(huì)對(duì)函數(shù)組件的輸入屬性進(jìn)行淺比較，如果輸入屬性沒(méi)有發(fā)生變化，那么組件就不會(huì)重新渲染。只有當(dāng)輸入屬性發(fā)生變化時(shí)，memo 才會(huì)重新調(diào)用函數(shù)組件進(jìn)行渲染。

const MemoizedComponent = React.memo(MyComponent);

舉個(gè)例子

const MyComponent = ({ text }) => {
  // 組件邏輯
  return <div>{text}</div>;
};
const MemoizedComponent = React.memo(MyComponent);
const ParentComponent = () => {
  const [text, setText] = useState('Hello');
  useEffect(() => {
    setTimeout(() => {
      setText('Hello, World!');
    }, 1000);
  }, []);
  return <MemoizedComponent text={text} />;
};

適用場(chǎng)景

forwardRef 的適用場(chǎng)景

• 當(dāng)你需要在父組件中直接操作子組件內(nèi)部的特定元素或組件時(shí)，可以使用 forwardRef 將 ref 傳遞到函數(shù)組件內(nèi)部的特定元素或組件中。
• 例如，如果你希望在父組件中調(diào)用子組件的方法、訪問(wèn)子組件的某個(gè) DOM 元素或組件實(shí)例等，就可以使用 forwardRef 來(lái)實(shí)現(xiàn)。
• 在這種情況下，forwardRef 可以提高代碼的可維護(hù)性和可讀性，使父組件更方便地控制子組件。

memo 的適用場(chǎng)景

• 當(dāng)組件的輸入屬性沒(méi)有發(fā)生變化時(shí)不希望重新渲染組件時(shí)，可以使用 memo 進(jìn)行組件的淺比較。
• = 通過(guò)避免不必要的重復(fù)渲染，memo 可以顯著提高組件的渲染性能，減少不必要的 DOM 操作，改善用戶(hù)體驗(yàn)。
• memo 適用于純展示型組件或受控組件等，在這些組件中，輸入屬性的變化不會(huì)導(dǎo)致組件內(nèi)部狀態(tài)的改變，也不會(huì)引起副作用。

優(yōu)點(diǎn)缺點(diǎn)

forwardRef 的優(yōu)點(diǎn)：

提供了一種簡(jiǎn)單的方式將 ref 傳遞給函數(shù)組件內(nèi)部的特定元素或組件。
可以讓父組件更方便地操作子組件內(nèi)部的特定元素或組件，提高了代碼的可維護(hù)性和可讀性。

forwardRef 的缺點(diǎn)：

增加了組件層級(jí)，可能會(huì)導(dǎo)致額外的性能開(kāi)銷(xiāo)。
可能會(huì)破壞組件的封裝性，使組件與父組件之間產(chǎn)生緊密耦合。

memo 的優(yōu)點(diǎn)：

通過(guò)淺比較可以避免不必要的組件渲染，提高了組件的性能。
對(duì)于純展示型組件或受控組件等，可以有效減少不必要的 DOM 操作，改善用戶(hù)體驗(yàn)。

memo 的缺點(diǎn)：

僅適用于基于輸入屬性的淺比較，如果組件的渲染依賴(lài)于其他因素（如上下文、狀態(tài)等），則可能無(wú)法發(fā)揮優(yōu)化作用。
使用 memo 進(jìn)行淺比較會(huì)引入一定的計(jì)算開(kāi)銷(xiāo)，對(duì)于簡(jiǎn)單的組件可能不值得使用。

到此這篇關(guān)于react中的forwardRef 和memo的區(qū)別？的文章就介紹到這了,更多相關(guān)react中的forwardRef 和memo的區(qū)別？?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論