看官方的文檔介紹這兩個(gè)api的概念

useMemo

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

返回一個(gè) memoized 值。

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

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

useCallback

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

返回一個(gè) memoized 回調(diào)函數(shù)。

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

useCallback(fn, deps) 相當(dāng)于 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 中是一個(gè)鉤子函數(shù)
• 在 useMemo 中是一個(gè)返回值。

總結(jié)

返回的值類型不同

• useMemo 返回的是計(jì)算值
• useCallback 返回的是一個(gè)回調(diào)函數(shù)

來個(gè) 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ù)都是一個(gè)函數(shù)加一個(gè)依賴數(shù)組，依賴沒有改變時(shí)直接返回內(nèi)存中緩存的結(jié)果，無需重復(fù)計(jì)算。簡單理解就是 useCallback 緩存事件處理函數(shù)，useMemo 緩存二次計(jì)算的結(jié)果，如上面的點(diǎn)擊事件，以及通過 count 值判斷奇數(shù)偶數(shù)的二次計(jì)算結(jié)果。

本質(zhì)原因

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

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

最新評論