React.memo怎么用

React.memo()是一個高階組件 (HOC)，它接收一個組件A作為參數(shù)并返回一個組件B，如果組件B的 props（或其中的值）沒有改變，則組件 B 會阻止組件 A 重新渲染 。

下面我們看一個示例：

const ParentComponent = () => {
  const [ count, setCount ] = useState(0);
  const handleParent = () => {
    console.log('clicked ParentComponent');
    setCount(preCount => preCount + 1);
  };
  return (
    <div>
      <div onClick={handleParent}>父組件，點(diǎn)擊了{(lán)count}次</div>
      <ChildrenComponent />
    </div>
  );
};
const ChildrenComponent = () => {
  console.log('ChildrenComponent rending');
  return <div>我是子組件</div>;
};

點(diǎn)擊父組件：

可以看到控制臺中輸出了子組件里的打印，表示子組件 rerender 了，如果子組件中有龐大的 dom 結(jié)構(gòu)和計(jì)算，那是非常消耗性能的事，通過 memo 我們可以對比 render 前后的 prop 變化，如果沒有變化就不會重新 render 子組件：

const ChildrenComponent = memo(() => {
  console.log('ChildrenComponent rending');
  return <div>我是子組件</div>;
});

把子組件通過 memo 包裹后就不會因?yàn)楦附M件更新導(dǎo)致的 render 了

React.useMemo怎么用

React.memo() 是一個 HOC，而 useMemo() 是一個 React Hook。 使用 useMemo()，我們可以返回記憶值來避免函數(shù)的依賴項(xiàng)沒有改變的情況下重新渲染。并且可以避免在每次渲染時都進(jìn)行高開銷的計(jì)算的優(yōu)化的策略。

   const sum = ()=>{
      return a+b
   }
   const result = useMemo(()=>{sum()},[a,b])
   // 只有在a或者b的值變化時才會觸發(fā)sum函數(shù)執(zhí)行

React.memo()和useMemo()的主要區(qū)別

從上面的例子中，我們可以看到 React.memo() 和 useMemo() 之間的主要區(qū)別：

• React.memo() 是一個高階組件，我們可以使用它來包裝我們不想重新渲染的組件，除非其中的 props 發(fā)生變化
• useMemo() 是一個 React Hook，我們可以使用它在組件中包裝函數(shù)。 我們可以使用它來確保該函數(shù)中的值僅在其依賴項(xiàng)之一發(fā)生變化時才重新計(jì)算

雖然 memoization 似乎是一個可以隨處使用的巧妙小技巧，但只有在絕對需要這些性能提升時才應(yīng)該使用它。 Memoization 會占用運(yùn)行它的機(jī)器上的內(nèi)存空間，因此可能會導(dǎo)致意想不到的效果。

React.useCallback怎么用

我們看一下下面這個示例：

const ParentComponent = () => {
  const [ count, setCount ] = useState(0);
  const [ childCount, setChildCount ] = useState(0)
  const handleChildren = () => {
    console.log('clicked ChildrenComponent');
    setChildCount(preCount => preCount + 1)
  };
  const handleParent = () => {
    console.log('clicked ParentComponent');
    setCount(preCount => preCount + 1);
  };
  return (
    <div>
      <div onClick={handleParent}>父組件，點(diǎn)擊了{(lán)count}次</div>
      <ChildrenComponent handleChildren={handleChildren} data={childCount}/>
    </div>
  );
};
const ChildrenComponent = memo(({ handleChildren, data }) => {
  console.log('ChildrenComponent rending', data);
  return <div onClick={handleChildren}>ChildrenComponent，子組件被點(diǎn)擊了{(lán)data}次 </div>;
});

在上面的例子中，我們把子組件通過 React.memo 包起來了，希望在父組件更新的時候，子組件不會 再次render，那么會和我們想的一樣嗎？

當(dāng)點(diǎn)擊父組件時，子組件再次 render 了， 因?yàn)樽咏M件的 prop 傳入了有函數(shù) handleChildren ，當(dāng)點(diǎn)擊父組件時更改了 state 值導(dǎo)致父組件重新 render，那么原來的 hanldeChildren 函數(shù)和更新后的 hanldeChildren 顯然處在不同的執(zhí)行環(huán)境中，他們并不是一個函數(shù)，在內(nèi)存中不是同一個引用地址，所以就導(dǎo)致了 memo 的包裹無效，因?yàn)?prop 改變了。

useCallback 需要傳入兩個參數(shù)

• callback（僅僅是個函數(shù)），把要做事情的函數(shù)放在callback函數(shù)體內(nèi)執(zhí)行
• deps 要做事情的函數(shù)需要引入的外部參數(shù)或者是依賴參數(shù)

  const handleChildrenCallback = useCallback(() => {
    handleChildren();
  }, []);// 咱們不需要就不要傳入

useCallback 返回一個 memoized 回調(diào)函數(shù)。在依賴參數(shù)不變的情況下，返回的回調(diào)函數(shù)是同一個引用地址

注意 每當(dāng)依賴參數(shù)發(fā)生改變useCallback就會自動重新返回一個新的 memoized 函數(shù)（地址發(fā)生改變）

上面就是沒有使用 useCallBack 的使用場景，現(xiàn)在我們知道了，把要傳遞的函數(shù)參數(shù)通過 useCallBack 包裹一層，這樣返回的回調(diào)函數(shù)就是同一個引用地址，這樣子組件就不會 rerender 了：

 const handleChildren = useCallback(() => {
    console.log('clicked ChildrenComponent');
    setChildCount(preCount => preCount + 1)
  }, [setChildCount]);

現(xiàn)在在點(diǎn)擊父組件后，子組件就不會再 rerender 了。

大伙現(xiàn)在應(yīng)該明白了useCallback的作用了，它主要用來配合memo用于優(yōu)化子組件的渲染次數(shù)

memo與useMemo及useCallback的區(qū)別

• memo用來優(yōu)化函數(shù)組件的重復(fù)渲染行為，針對的是一個組件
• useMemo返回一個memoized的值
• 本質(zhì)都是用同樣的算法來判定依賴是否發(fā)生改變，繼而決定是否觸發(fā)memo或者useMemo中的邏輯，利用memo就可以避免不必要的重復(fù)計(jì)算，減少資源浪費(fèi)
• useCallback返回一個memoized的函數(shù)

防止不必要的 effect

如果一個值被 useEffect 依賴，那它可能需要被緩存，這樣可以避免重復(fù)執(zhí)行 effect。

const Component = () => {
  // 在 re-renders 之間緩存 a 的引用
  const a = useMemo(() => ({ test: 1 }), []);
  useEffect(() => {
    // 只有當(dāng) a 的值變化時，這里才會被觸發(fā)
    doSomething();
  }, [a]);
  // the rest of the code
};

useCallback 同理：

const Component = () => {
  // 在 re-renders 之間緩存 fetch 函數(shù)
  const fetch = useCallback(() => {
    console.log('fetch some data here');
  }, []);
  useEffect(() => {
    // 僅fetch函數(shù)的值被改變時，這里才會被觸發(fā)
    fetch();
  }, [fetch]);
  // the rest of the code
};

當(dāng)變量直接或者通過依賴鏈成為 useEffect 的依賴項(xiàng)時，那它可能需要被緩存。這也是 useMemo 和 useCallback 得基本用法之一。

到此這篇關(guān)于React 中 memo useMemo useCallback 到底該怎么用的文章就介紹到這了,更多相關(guān)React memo useMemo useCallback內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論