React18中useMemo、useCallback和memo怎么使用

本篇內(nèi)容介紹了“React18中useMemo、useCallback和memo怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

用法

useMemo

useMemo 是一個(gè)用于優(yōu)化性能的 React 鉤子。它可以幫助我們避免在組件重新渲染時(shí)執(zhí)行昂貴的計(jì)算。useMemo 接受兩個(gè)參數(shù)：一個(gè)函數(shù)和一個(gè)依賴數(shù)組。當(dāng)依賴數(shù)組中的值發(fā)生變化時(shí)，useMemo 會(huì)重新計(jì)算并返回新的值。否則，它將返回上一次計(jì)算的值。

一個(gè)簡單的例子：

import React, { useMemo } from "react";
function ExpensiveComponent({ a, b }) {
  const result = useMemo(() => {
    console.log("Expensive calculation...");
    return a * b;
  }, [a, b]);
  return <div>Result: {result}</div>;
}

我們創(chuàng)建了一個(gè)名為 ExpensiveComponent 的組件，它接受兩個(gè)屬性 a 和 b 并使用 useMemo 鉤子來計(jì)算 a 和 b 的乘積。當(dāng) a 或 b 發(fā)生變化時(shí)，useMemo 會(huì)重新計(jì)算結(jié)果。否則，它將返回上一次計(jì)算的值，避免了不必要的計(jì)算。

useCallback

useCallback 是另一個(gè)用于優(yōu)化性能的 React 鉤子。它可以幫助我們避免在組件重新渲染時(shí)創(chuàng)建新的函數(shù)實(shí)例。useCallback 接受兩個(gè)參數(shù)：一個(gè)函數(shù)和一個(gè)依賴數(shù)組。當(dāng)依賴數(shù)組中的值發(fā)生變化時(shí)，useCallback 會(huì)返回一個(gè)新的函數(shù)實(shí)例。否則，它將返回上一次創(chuàng)建的函數(shù)實(shí)例。

再看一個(gè)簡單的例子：

import React, { useCallback } from "react";
function ButtonComponent({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}
function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);
  return (
    <div>
      <ButtonComponent onClick={handleClick}>Click me</ButtonComponent>
    </div>
  );
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為 ButtonComponent 的組件，它接受一個(gè) onClick 函數(shù)屬性。我們還創(chuàng)建了一個(gè)名為 ParentComponent 的組件，它使用 useCallback 鉤子來創(chuàng)建一個(gè) handleClick 函數(shù)。當(dāng) ParentComponent 重新渲染時(shí)，useCallback 會(huì)返回上一次創(chuàng)建的 handleClick 函數(shù)實(shí)例，避免了不必要的函數(shù)創(chuàng)建。

memo

memo 是一個(gè)用于優(yōu)化性能的 React 高階組件。它可以幫助我們避免在父組件重新渲染時(shí)重新渲染子組件。memo 接受一個(gè)組件作為參數(shù)，并返回一個(gè)新的組件。當(dāng)新組件的屬性發(fā)生變化時(shí)，它會(huì)重新渲染。否則，它將跳過渲染并返回上一次渲染的結(jié)果。

繼續(xù)舉例子：

import React, { memo } from "react";
const ChildComponent = memo(function ChildComponent({ text }) {
  console.log("ChildComponent rendered");
  return <div>{text}</div>;
});
function ParentComponent({ showChild }) {
  return (
    <div>
      {showChild && <ChildComponent text="Hello, world!" />}
      <button onClick={() => setShowChild(!showChild)}>Toggle child</button>
    </div>
  );
}

在這個(gè)例子中，我們創(chuàng)建了一個(gè)名為 ChildComponent 的組件，并使用 memo 高階組件對其進(jìn)行了優(yōu)化。我們還創(chuàng)建了一個(gè)名為 ParentComponent 的組件，它可以切換 ChildComponent 的顯示。當(dāng) ParentComponent 重新渲染時(shí)，ChildComponent 的屬性沒有發(fā)生變化，因此它不會(huì)重新渲染。

區(qū)別

用法都很清楚了，接下來總結(jié)一下它們之間的區(qū)別：

• useMemo 用于避免在組件重新渲染時(shí)執(zhí)行昂貴的計(jì)算，只有在依賴發(fā)生變化時(shí)重新計(jì)算值。

• useCallback 用于避免在組件重新渲染時(shí)創(chuàng)建新的函數(shù)實(shí)例，只有在依賴發(fā)生變化時(shí)返回新的函數(shù)實(shí)例。

• memo 用于避免在父組件重新渲染時(shí)重新渲染子組件，只有在屬性發(fā)生變化時(shí)重新渲染組件。

雖然這些功能都可以幫助我們優(yōu)化性能，但它們的使用場景和工作原理有所不同。在實(shí)際開發(fā)中，需要因地制宜合理選用。

源碼分析

為了更深入地了解 useMemo、useCallback 和 memo 的工作原理，我們將繼續(xù)分析 React 18 的源碼。我們將關(guān)注這些功能的核心邏輯，并詳細(xì)解釋它們的功能。

調(diào)度器

眾所周知，在React hooks的體系中，每個(gè)鉤子都有自己各個(gè)階段的執(zhí)行邏輯，并且存到對應(yīng)的Dispatcher中。

就拿useMemo來舉例：

// 掛載時(shí)的調(diào)度器
const HooksDispatcherOnMount: Dispatcher = {
  // useMemo 掛載時(shí)的執(zhí)行函數(shù)
  useMemo: mountMemo,
  // other hooks...
};
// 數(shù)據(jù)更新時(shí)的調(diào)度器
const HooksDispatcherOnUpdate: Dispatcher = {
  // useMemo 掛載時(shí)的執(zhí)行函數(shù)
  useMemo: updateMemo,
  // other hooks...
};
// 其他生命周期調(diào)度器...

上面代碼可以看出，useMemo 在掛載時(shí)執(zhí)行了的是 mountMemo， 而在更新數(shù)據(jù)時(shí)執(zhí)行的是 updateMemo。但為了更好了解 useMemo、useCallback 和 memo 的區(qū)別，我們只看更新部分就足夠了。

useMemo 源碼分析

源碼在packages/react-reconciler/src/ReactFiberHooks.js 中可以找到：

function updateMemo<T>(
  nextCreate: () => T,
  deps: Array<mixed> | void | null,
): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  // Assume these are defined. If they're not, areHookInputsEqual will warn.
  if (nextDeps !== null) {
    const prevDeps: Array<mixed> | null = prevState[1];
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0];
    }
  }
  if (shouldDoubleInvokeUserFnsInHooksDEV) {
    nextCreate();
  }
  const nextValue = nextCreate();
  hook.memoizedState = [nextValue, nextDeps];
  return nextValue;
}

在 updateMemo 的實(shí)現(xiàn)中，有一個(gè)關(guān)鍵函數(shù) areHookInputsEqual，它用于比較依賴項(xiàng)數(shù)組：

function areHookInputsEqual(
  nextDeps: Array<mixed>,
  prevDeps: Array<mixed> | null,
): boolean {
  if (__DEV__) {
    if (ignorePreviousDependencies) {
      // Only true when this component is being hot reloaded.
      return false;
    }
  }
  if (prevDeps === null) {
    if (__DEV__) {
      console.error(
        '%s received a final argument during this render, but not during ' +
          'the previous render. Even though the final argument is optional, ' +
          'its type cannot change between renders.',
        currentHookNameInDev,
      );
    }
    return false;
  }
  if (__DEV__) {
    // Don't bother comparing lengths in prod because these arrays should be
    // passed inline.
    if (nextDeps.length !== prevDeps.length) {
      console.error(
        'The final argument passed to %s changed size between renders. The ' +
          'order and size of this array must remain constant.\n\n' +
          'Previous: %s\n' +
          'Incoming: %s',
        currentHookNameInDev,
        `[${prevDeps.join(', ')}]`,
        `[${nextDeps.join(', ')}]`,
      );
    }
  }
  // $FlowFixMe[incompatible-use] found when upgrading Flow
  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    // $FlowFixMe[incompatible-use] found when upgrading Flow
    if (is(nextDeps[i], prevDeps[i])) {
      continue;
    }
    return false;
  }
  return true;
}

areHookInputsEqual 函數(shù)接受兩個(gè)依賴項(xiàng)數(shù)組 nextDeps 和 prevDeps。它首先檢查兩個(gè)數(shù)組的長度是否相等，如果不相等，將在開發(fā)模式下發(fā)出警告。然后，它遍歷數(shù)組并使用 is 函數(shù)（類似于 Object.is）逐個(gè)比較元素。如果發(fā)現(xiàn)任何不相等的元素，函數(shù)將返回 false。否則，返回 true。

這個(gè)函數(shù)在 useMemo 的實(shí)現(xiàn)中起到了關(guān)鍵作用，因?yàn)樗鼪Q定了是否需要重新計(jì)算值。如果依賴項(xiàng)數(shù)組相等，useMemo 將返回上一次計(jì)算的值；否則，它將執(zhí)行 nextCreate 函數(shù)并返回一個(gè)新的值。

useCallback 源碼分析

由于 useCallback 和 useMemo 實(shí)現(xiàn)一致，其原理都是通過areHookInputsEqual 函數(shù)進(jìn)行依賴項(xiàng)比對，區(qū)別在于 useMemo 返回是新數(shù)據(jù)對象，而 useCallback 返回是回調(diào)函數(shù)。源碼如下：

function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;
  if (nextDeps !== null) {
    const prevDeps: Array<mixed> | null = prevState[1];
    if (areHookInputsEqual(nextDeps, prevDeps)) {
      return prevState[0];
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

memo 源碼分析

在 memo 的實(shí)現(xiàn)中，有一個(gè)關(guān)鍵函數(shù) updateMemoComponent，它用于更新 memo 組件。這個(gè)函數(shù)位于 packages/react-reconciler/src/ReactFiberBeginWork.js 文件中：

function updateMemoComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps: any,
  updateLanes: Lanes,
  renderLanes: Lanes,
): null | Fiber {
  if (current !== null) {
    // ...
    const prevProps = current.memoizedProps;
    const compare = Component.compare;
    const compareFn = compare !== null ? compare : shallowEqual;
    if (compareFn(prevProps, nextProps)) {
      return bailoutOnAlreadyFinishedWork(
        current,
        workInProgress,
        renderLanes,
      );
    }
  }
  // ...render the component and return the result
}

updateMemoComponent 函數(shù)首先檢查當(dāng)前組件是否具有上一次的屬性 prevProps。如果存在，它將獲取 memo 組件的比較函數(shù) compare。如果沒有提供比較函數(shù)，React 將使用默認(rèn)的淺比較函數(shù) shallowEqual。

接下來，React 使用比較函數(shù)來檢查上一次的屬性 prevProps 是否與新的屬性 nextProps 相等。如果相等，React 將調(diào)用 bailoutOnAlreadyFinishedWork 函數(shù)來阻止組件重新渲染。否則，它將繼續(xù)渲染組件并返回結(jié)果。

bailoutOnAlreadyFinishedWork 函數(shù)的實(shí)現(xiàn)位于同一個(gè)文件中，它的核心邏輯如下：

    function bailoutOnAlreadyFinishedWork(
      current: Fiber | null,
      workInProgress: Fiber,
      renderLanes: Lanes,
    ): null | Fiber {
      if (current !== null) {
        // Reuse previous dependencies
        workInProgress.dependencies = current.dependencies;
      }
      // ...some code
      // Check if the children have any pending work
      if ((workInProgress.childLanes & renderLanes) !== NoLanes) {
        // ...some code
      } else {
        // The children don't have any work. Set the bailout state.
        workInProgress.lanes = NoLanes;
        workInProgress.childLanes = NoLanes;
        return null;
      }
      // ...some code
    }

bailoutOnAlreadyFinishedWork 函數(shù)首先復(fù)用上一次的依賴項(xiàng)。然后，它檢查子組件是否有任何待處理的工作。如果沒有，它將設(shè)置 workInProgress.lanes 和 workInProgress.childLanes 為 NoLanes，并返回 null，從而阻止組件重新渲染。

“React18中useMemo、useCallback和memo怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！