React中的useMemo 和 useEffect 執(zhí)行順序

更新時間：2025年01月10日 11:02:49 作者：灰色人生qwer

在 React 組件的渲染過程中,useMemo 和 useEffect 的執(zhí)行順序是不同的,本文給大家介紹React中的useMemo 和 useEffect 哪個先執(zhí)行,感興趣的朋友一起看看吧

在 React 組件的渲染過程中，useMemo 和 useEffect 的執(zhí)行順序是不同的。具體來說：

useMemo 先執(zhí)行：useMemo 是在渲染階段執(zhí)行的，它的作用是緩存計算結(jié)果，確保在渲染過程中可以直接使用緩存的值。
useEffect 后執(zhí)行：useEffect 是在提交階段執(zhí)行的，它的作用是處理副作用（如數(shù)據(jù)獲取、DOM 操作等），并且是在 DOM 更新之后才運行。

詳細(xì)執(zhí)行順序

組件渲染階段：

React 調(diào)用組件的渲染方法（函數(shù)組件的函數(shù)體或類組件的 render 方法）。
在渲染過程中，useMemo 會被執(zhí)行，計算并緩存值。
如果依賴項沒有變化，useMemo 會直接返回緩存的值，避免重復(fù)計算。

DOM 更新階段：

React 將組件的渲染結(jié)果應(yīng)用到 DOM 上，更新 UI。

提交階段：

在 DOM 更新完成后，React 會執(zhí)行 useEffect 中的副作用函數(shù)。
如果 useEffect 有清理函數(shù)（返回的函數(shù)），它會在組件卸載或依賴項變化時執(zhí)行。

示例代碼

import React, { useMemo, useEffect, useState } from 'react';
function MyComponent({ a, b }) {
  // useEffect 寫在 useMemo 上面
  useEffect(() => {
    console.log('useEffect: Side effect after DOM update');
    return () => {
      console.log('useEffect: Cleanup');
    };
  }, [a, b]);
  // useMemo 寫在 useEffect 下面
  const memoizedValue = useMemo(() => {
    console.log('useMemo: Calculating expensive value...');
    return a + b;
  }, [a, b]);
  console.log('Render: Component rendering...');
  return (
    <div>
      <p>Memoized Value: {memoizedValue}</p>
    </div>
  );
}
function App() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
  return (
    <div>
      <MyComponent a={a} b= />
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

控制臺輸出順序

當(dāng)組件首次渲染時：

Render: Component rendering...
useMemo: Calculating expensive value...
useEffect: Side effect after DOM update

當(dāng) a 或 b 變化時：

Render: Component rendering...
useMemo: Calculating expensive value...
useEffect: Cleanup
useEffect: Side effect after DOM update

總結(jié)

useMemo 在渲染階段執(zhí)行：無論它寫在 useEffect 上面還是下面，它都會在組件渲染時執(zhí)行。
useEffect 在提交階段執(zhí)行：它總是在 DOM 更新后執(zhí)行，與代碼書寫順序無關(guān)。
React 的執(zhí)行順序是固定的：useMemo 先執(zhí)行，useEffect 后執(zhí)行。

如果你需要在渲染階段避免昂貴的計算，使用 useMemo；如果你需要在 DOM 更新后執(zhí)行某些操作（如數(shù)據(jù)獲取或訂閱），使用 useEffect。

到此這篇關(guān)于React中的useMemo 和 useEffect 執(zhí)行順序的文章就介紹到這了,更多相關(guān)React useMemo 和 useEffect 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: