脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React useMemo 和 useEffect

React中的useMemo 和 useEffect 执行顺序

 更新时间：2025年01月10日 11:02:49   作者：灰色人生qwer  
在 React 组件的渲染过程中,useMemo 和 useEffect 的执行顺序是不同的,本文给大家介绍React中的useMemo 和 useEffect 哪个先执行,感兴趣的朋友一起看看吧

在 React 组件的渲染过程中，useMemo 和 useEffect 的执行顺序是不同的。具体来说：

  • useMemo 先执行：useMemo 是在 渲染阶段 执行的，它的作用是缓存计算结果，确保在渲染过程中可以直接使用缓存的值。
  • useEffect 后执行：useEffect 是在 提交阶段 执行的，它的作用是处理副作用（如数据获取、DOM 操作等），并且是在 DOM 更新之后才运行。

详细执行顺序

组件渲染阶段：

  • React 调用组件的渲染方法（函数组件的函数体或类组件的 render 方法）。
  • 在渲染过程中，useMemo 会被执行，计算并缓存值。
  • 如果依赖项没有变化，useMemo 会直接返回缓存的值，避免重复计算。

DOM 更新阶段：

  • React 将组件的渲染结果应用到 DOM 上，更新 UI。

提交阶段：

  • 在 DOM 更新完成后，React 会执行 useEffect 中的副作用函数。
  • 如果 useEffect 有清理函数（返回的函数），它会在组件卸载或依赖项变化时执行。

示例代码

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={b} />
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

控制台输出顺序

当组件首次渲染时：

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

当 a 或 b 变化时：

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

总结

  • useMemo 在渲染阶段执行：无论它写在 useEffect 上面还是下面，它都会在组件渲染时执行。
  • useEffect 在提交阶段执行：它总是在 DOM 更新后执行，与代码书写顺序无关。
  • React 的执行顺序是固定的：useMemo 先执行，useEffect 后执行。

如果你需要在渲染阶段避免昂贵的计算，使用 useMemo；如果你需要在 DOM 更新后执行某些操作（如数据获取或订阅），使用 useEffect。

到此这篇关于React中的useMemo 和 useEffect 执行顺序的文章就介绍到这了,更多相关React useMemo 和 useEffect 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React Router v6路由懒加载的2种方式小结

    React Router v6路由懒加载的2种方式小结

    React Router v6 的路由懒加载有2种实现方式,1是使用react-router自带的 route.lazy,2是使用React自带的 React.lazy,下面我们就来看看它们的具体实现方法吧
    2024-04-04
  • 每天学习一个hooks useMount

    每天学习一个hooks useMount

    这篇文章主要为大家介绍了每天学习一个hooks useMount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 浅谈React碰到v-if

    浅谈React碰到v-if

    这篇文章主要介绍了浅谈React碰到v-if,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • React Native可定制底板组件Magic Sheet使用示例

    React Native可定制底板组件Magic Sheet使用示例

    这篇文章主要为大家介绍了React Native可定制的底板组件Magic Sheet使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

    D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

    这篇文章主要介绍了D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本) ，本文通过实例代码文字相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2019-05-05
  • React-hooks中的useEffect使用步骤

    React-hooks中的useEffect使用步骤

    这篇文章主要介绍了React-hooks中的useEffect,对于React组件来说，主作用是根据数据(state/props)渲染UI，除此之外都是副作用（比如手动修改DOM、发送ajax请求），本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
    2022-05-05
  • 详细聊聊React源码中的位运算技巧

    详细聊聊React源码中的位运算技巧

    众所周知在React中,主要用到3种位运算符 —— 按位与、按位或、按位非,下面这篇文章主要给大家介绍了关于React源码中的位运算技巧的相关资料,需要的朋友可以参考下
    2021-10-10
  • React 子组件向父组件传值的方法

    React 子组件向父组件传值的方法

    本篇文章主要介绍了React 子组件向父组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • React合成事件原理解析

    React合成事件原理解析

    事件是在编程时系统内发生的动作或者发生的事情，而开发者可以某种方式对事件做出回应，而这里有几个先决条件，这篇文章主要介绍了React合成事件原理解析,需要的朋友可以参考下
    2022-07-07
  • React Hook 'useEffect' is called in function报错解决

    React Hook 'useEffect' is call

    这篇文章主要为大家介绍了React Hook 'useEffect' is called in function报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12

最新评论