react中的forwardRef 和memo的區(qū)別解析

更新時間：2023年10月30日 09:50:18 作者：斗

forwardRef和memo是React中用于性能優(yōu)化和組件復用的兩個高階函數(shù),本文給大家介紹react中的forwardRef 和memo的區(qū)別及適用場景,感興趣的朋友跟隨小編一起看看吧

介紹

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

forwardRef

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

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

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

舉個例子

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ù)。它可以包裹一個函數(shù)組件，并返回一個經(jīng)過優(yōu)化的組件。

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

const MemoizedComponent = React.memo(MyComponent);

舉個例子

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} />;
};

適用場景

forwardRef 的適用場景

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

memo 的適用場景