脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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中判断点击元素所属组件的方法详解

    在React中判断点击元素所属组件的方法详解

    在 React 开发中,经常需要处理点击事件并判断点击的元素属于哪个组件,这对于实现复杂的交互逻辑、状态管理和组件通信至关重要,本文将深入探讨多种判断方法,并提供详细的代码示例,需要的朋友可以参考下
    2025-09-09
  • react中如何使用局部样式

    react中如何使用局部样式

    这篇文章主要介绍了react中如何使用局部样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React Hooks获取数据实现方法介绍

    React Hooks获取数据实现方法介绍

    这篇文章主要介绍了react hooks获取数据,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-10-10
  • React项目配置axios和反向代理和process.env环境配置等问题

    React项目配置axios和反向代理和process.env环境配置等问题

    这篇文章主要介绍了React项目配置axios和反向代理和process.env环境配置等问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 浅谈React Event实现原理

    浅谈React Event实现原理

    这篇文章主要介绍了浅谈React Event实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • react组件中debounce防抖功能失效问题解决办法

    react组件中debounce防抖功能失效问题解决办法

    在React组件中,如果使用useState管理searchKey,每次输入变化都会导致组件重新渲染,从而生成新的debounce函数,导致防抖功能失效,解决方法是使用useRef定义searchKey为非响应式数据,从而维持debounce函数的稳定,确保防抖功能有效,感兴趣的朋友跟随小编一起看看吧
    2024-10-10
  • 解决React报错React Hook useEffect has a missing dependency

    解决React报错React Hook useEffect has a missing dependency

    这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 用React-Native+Mobx做一个迷你水果商城APP(附源码)

    用React-Native+Mobx做一个迷你水果商城APP(附源码)

    这篇文章主要介绍了用React-Native+Mobx做一个迷你水果商城APP,功能需要的朋友可以参考下
    2017-12-12
  • 使用hooks写React组件需要注意的5个地方

    使用hooks写React组件需要注意的5个地方

    这篇文章主要介绍了使用hooks写React组件需要注意的5个地方，帮助大家更好的理解和学习使用React组件，感兴趣的朋友可以了解下
    2021-04-04
  • 基于webpack4搭建的react项目框架的方法

    基于webpack4搭建的react项目框架的方法

    本篇文章主要介绍了基于webpack4搭建的react项目框架的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论