React useMemo與useCallabck有什么區(qū)別

更新時間：2022年12月20日 11:59:20 作者：地鐵程序員

useCallback和useMemo是一樣的東西，只是入?yún)⒂兴煌瑄seCallback緩存的是回調函數(shù)，如果依賴項沒有更新，就會使用緩存的回調函數(shù)；useMemo緩存的是回調函數(shù)的return，如果依賴項沒有更新，就會使用緩存的return

看官方的文檔介紹這兩個api的概念

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

返回一個 memoized 值。

1、把“創(chuàng)建”函數(shù)和依賴項數(shù)組作為參數(shù)傳入 useMemo，它僅會在某個依賴項改變時才重新計算 memoized 值。這種優(yōu)化有助于避免在每次渲染時都進行高開銷的計算。

2、如果沒有提供依賴項數(shù)組，useMemo 在每次渲染時都會計算新的值。

useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

返回一個 memoized 回調函數(shù)。

把內聯(lián)回調函數(shù)及依賴項數(shù)組作為參數(shù)傳入 useCallback，它將返回該回調函數(shù)的 memoized 版本，該回調函數(shù)僅在某個依賴項改變時才會更新。當你把回調函數(shù)傳遞給經過優(yōu)化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子組件時，它將非常有用。

useCallback(fn, deps) 相當于 useMemo(() => fn, deps)

看TS類型

 /**
     * `useMemo` will only recompute the memoized value when one of the `deps` has changed.
     *
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#usememo
     */
    // allow undefined, but don't make it optional as that is very likely a mistake
    function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
 /**
     * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`
     * has changed.
     *
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#usecallback
     */
    // A specific function type would not trigger implicit any.
    // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types.
    // tslint:disable-next-line ban-types
    function useCallback<T extends Function>(callback: T, deps: DependencyList): T;

泛型 T 在 useCallback 中是一個鉤子函數(shù)
在 useMemo 中是一個返回值。

總結

返回的值類型不同

useMemo 返回的是計算值
useCallback 返回的是一個回調函數(shù)

來個 demo

import React, { FC, useCallback, useMemo, useState } from 'react';
const Index: FC = (props) => {
  const [count, setCount] = useState(0);
  const isEvenNumber = useMemo(() => {
    return count % 2 === 0;
  }, [count]);
  const onClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <div>{count} is {isEvenNumber ？ 'even':'odd'} number</div>
      <button onClick={onClick}></button>
    </div>
  );
};

useCallback 和 useMemo 的參數(shù)都是一個函數(shù)加一個依賴數(shù)組，依賴沒有改變時直接返回內存中緩存的結果，無需重復計算。簡單理解就是 useCallback 緩存事件處理函數(shù)，useMemo 緩存二次計算的結果，如上面的點擊事件，以及通過 count 值判斷奇數(shù)偶數(shù)的二次計算結果。

本質原因

React 的函數(shù)組件是非常好用的東西，相比 class 寫法以及 Vue 的對象掛載寫法簡潔很多，代碼測試復用成本低，容易入手，但也帶來一些問題，無狀態(tài)函數(shù)很理想，但現(xiàn)實有一些計算開銷大、組件渲染頻繁的場景是需要狀態(tài)的，每次都計算一遍狀態(tài)（callback 和二次計算值）無疑很浪費內存，函數(shù)不像對象（React class 寫法或者 Vue 組件寫法）可以直接將狀態(tài)掛載在自身，沒有浪費內存的問題，要實現(xiàn)類似的效果只能找一個的內存掛載點掛載這些東東，所以有了 useCallback 和 useMemo 這些 hook。

到此這篇關于React useMemo與useCallabck有什么區(qū)別的文章就介紹到這了,更多相關React useCallback useMemo內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: