深入理解React useRef与useReducer的同步更新机制_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

深入理解React useRef与useReducer的同步更新机制

2025-11-06

浏览次数：次

返回列表

深入理解React useRef与useReducer的同步更新机制

本文探讨了在react中使用`useref`和`usereducer`时，`useref`值无法在`dispatch`调用后立即更新的常见问题。通过分析react的异步渲染机制，揭示了`dispatch`调度更新与组件重新渲染之间的时序差异。文章提出并详细演示了通过定制化`dispatch`函数来同步更新`useref`的解决方案，确保在同一事件周期内获取到`useref`的最新值，从而优化组件行为和数据管理。

理解 useRef 与 useReducer 的交互行为

在React函数组件中，useRef和useReducer是两个非常强大的Hooks，分别用于在多次渲染之间持久化可变值和管理复杂的状态逻辑。然而，当它们结合使用时，开发者可能会遇到一个常见的困惑：useRef的值在useReducer的dispatch函数调用后，似乎没有立即更新。这通常是由于对React的更新机制理解不足所致。

useRef 的特性

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。这个 ref 对象在组件的整个生命周期内保持不变。重要的是，直接修改 ref.current 不会触发组件重新渲染。useRef 常用于访问 DOM 元素、存储任何可变值（如定时器 ID、计数器等）而无需触发重新渲染。

useReducer 的特性

useReducer 是 useState 的替代方案，用于处理更复杂的 state 逻辑。它接收一个 reducer 函数和一个初始 state，并返回当前的 state 以及一个 dispatch 函数。调用 dispatch 函数会向 reducer 发送一个 action，reducer 根据 action 计算出新的 state。与 useState 类似，dispatch 调用会调度一次组件重新渲染，但这个渲染是异步的，不会立即发生。

遇到的问题：useRef 值未能即时更新

考虑以下场景，我们创建一个自定义 Hook useCherry，其中包含一个 useRef 计数器和一个 useReducer 来管理一个数组：

import { useReducer, useRef } from "react";

const useCherry = () => {
    const myRef = useRef(0); // 初始化 myRef 为 0

    const [state, dispatch] = useReducer(
        (state, action) => {
            if (action.type === "add") {
                // 在 reducer 内部修改 myRef.current
                myRef.current += 1; 
                return [...state, "?"];
            }
            return state;
        },
        []
    );

    return [state, dispatch, myRef];
};

export default useCherry;

然后在组件中使用这个 Hook，并在按钮点击时尝试打印 myRef.current 的值：

import React from "react";
import useCherry from "./useCherry"; // 假设 useCherry 在同级目录

export default function App() {
  const [state, dispatch, myRef] = useCherry();

  return (
    <div>
      <p>{`Cherry: ${state.length}`}</p>
      <button
        type="button"
        onClick={() => {
          console.log(`myRef count before adding: ${myRef.current}`); // 第一次打印
          dispatch({ type: "add" }); // 触发状态更新
          console.log(`myRef count after adding: ${myRef.current}`); // 第二次打印
        }}
      >
        Add more cherry
      </button>
    </div>
  );
}

当点击按钮时，你可能会观察到以下输出：

myRef count before adding: 0
myRef count after adding: 0

这与预期不符，因为我们希望在 dispatch({ type: "add" }) 调用后，myRef.current 能够立即反映出 +1 的变化。

问题分析：React 的异步更新机制

造成上述现象的核心原因是 React 的更新调度机制是异步的。

当 onClick 事件触发时，首先执行 console.log(myRef.current)，此时 myRef.current 确实是 0。
接着调用 dispatch({ type: "add" })。
- dispatch 会立即执行 useReducer 中定义的 reducer 函数。
- 在 reducer 内部，myRef.current += 1 会被执行，此时 myRef.current 的值确实变成了 1。
- reducer 返回新的 state [...state, "?"]。
- dispatch 调度一次组件的重新渲染，但这个渲染不会立即发生，而是会被放入 React 的更新队列中。
dispatch 调用完成后，控制权立即返回到 onClick 函数的下一行代码。
此时，第二个 console.log(myRef.current) 被执行。由于组件尚未重新渲染，onClick 函数所在的当前函数作用域中，myRef 变量引用的仍然是 上一次渲染时 的 myRef 对象。虽然 myRef.current 的值在 reducer 内部已经被修改为 1，但因为 onClick 函数是在 当前渲染周期 中捕获的，它所引用的 myRef 对象在当前 onClick 的执行上下文中，其 .current 属性已经被修改。

真正的症结在于： 虽然 myRef.current 的值在 reducer 中被修改了，但 onClick 函数的执行是同步的。dispatch 只是调度了一次更新，而不是立即完成更新并重新渲染组件。因此，在 dispatch 后的同步代码中，myRef.current 应该已经改变。

为什么会出现“Logs 0, expected 1”？

实际上，问题描述中的“Logs 0, expected 1”是由于对 useRef 和 dispatch 机制的误解。useRef 的 .current 属性是可变的，对其的修改是立即生效的。在 reducer 中 myRef.current += 1 执行后，myRef.current 的值确实变成了 1。

Tanka

具备AI长期记忆的下一代团队协作沟通工具

146 查看详情 Tanka

如果外部的 onClick 函数能够访问到同一个 myRef 对象，那么在 dispatch 调用后，console.log(myRef.current) 应该打印出 1。

重新审视问题代码： 原问题中的代码：

onClick={() => {
    console.log(myRef.current); // Logs 0
    dispatch({ type: "add" });
    console.log(myRef.current);// Logs 0, expected 1
}}

如果 myRef.current += 1; 确实在 reducer 中执行了，那么第二个 console.log 应该打印 1。如果它仍然打印 0，则说明 myRef.current += 1; 这一行代码并没有被执行，或者 myRef 对象不是同一个。

更正： 仔细分析，myRef 是在 useCherry Hook 的顶层定义的，并且在每次渲染时都会返回同一个 ref 对象。因此，在 reducer 内部对 myRef.current 的修改是即时且全局可见的。原问题中描述的“Logs 0, expected 1”的情况，在理论上不应该发生，除非 myRef.current += 1; 这一行代码没有被执行，或者 myRef 对象在 onClick 的两次 console.log 之间发生了变化（这在 useRef 的设计下是不可能的）。

核心问题可能在于，开发者期望 useRef 的更新与 useReducer 的状态更新在逻辑上同步，并在同一事件循环中获取到这个同步后的值。

解决方案：定制化 dispatch 函数

为了在 dispatch 调用后立即获取到 myRef.current 的更新值，我们可以在调用原始 dispatch 之前，先执行对 myRef.current 的更新。这可以通过封装一个定制化的 dispatch 函数来实现。

这种方法将 useRef 的更新逻辑与 useReducer 的状态更新逻辑绑定在一起，确保它们在同一个事件处理周期内同步执行。

import React, { useReducer, useRef } from "react";

const useCherry = () => {
    const myRef = useRef(0); // 初始化 myRef 为 0
    const [state, dispatch] = useReducer(
        (state, action) => {
            if (action.type === "add") {
                // reducer 内部不再直接修改 myRef.current
                // 保持 reducer 的纯粹性，只根据 action 计算新 state
                return [...state, "?"];
            }
            return state;
        },
        []
    );

    // 定制化的 dispatch 函数
    const myDispatchCherry = (action) => {
        if (action?.type === "add") {
            myRef.current += 1; // 在调用原始 dispatch 前更新 myRef.current
        }
        dispatch(action); // 调用原始 dispatch 调度状态更新
    };

    // 导出定制化的 dispatch
    return { state, dispatch, myRef, myDispatchCherry };
};

export default useCherry;

现在，在组件中使用 myDispatchCherry：

import React from "react";
import useCherry from "./useCherry"; // 假设 useCherry 在同级目录

export default function App() {
  const { state, myRef, myDispatchCherry } = useCherry(); // 解构出 myDispatchCherry

  return (
    <div>
      <p>{`Cherry: ${state.length}`}</p>
      <button
        type="button"
        onClick={() => {
          console.log(`myRef count before adding: ${myRef.current}`); // 第一次打印
          myDispatchCherry({ type: "add" }); // 调用定制化的 dispatch
          console.log(`myRef count after adding: ${myRef.current}`); // 第二次打印
        }}
      >
        Add more cherry
      </button>
    </div>
  );
}

现在，当点击按钮时，输出将符合预期：

myRef count before adding: 0
myRef count after adding: 1

解决方案解析

通过 myDispatchCherry 函数，我们实现了以下目标：

同步更新 myRef.current： 在 myDispatchCherry 内部，myRef.current += 1 会在调用原始 dispatch(action) 之前同步执行。这意味着当 dispatch 被调度时，myRef.current 已经包含了更新后的值。
保持 Reducer 的纯粹性： 将 myRef.current 的副作用操作移出 reducer。Reducer 应该是一个纯函数，只根据当前 state 和 action 计算新的 state，而不应该有副作用。这提高了代码的可预测性和可测试性。
清晰的职责分离： myDispatchCherry 承担了与特定 action 相关的副作用（更新 myRef）的责任，而原始 dispatch 则专注于状态管理。

总结与最佳实践

useRef 更新是同步的： 对 myRef.current 的修改会立即生效。
useReducer 的 dispatch 是异步调度： 调用 dispatch 会调度一次组件重新渲染，但渲染不会立即发生。
避免在 Reducer 中执行副作用： 尽量保持 useReducer 的 reducer 函数为纯函数，只负责计算新的 state。
同步副作用的处理： 如果需要在触发状态更新的同时，同步更新 useRef 或执行其他副作用，可以创建一个封装了原始 dispatch 的定制化函数。在这个定制函数中，先执行副作用，再调用原始 dispatch。
明确数据流： 当 useRef 的值与 useReducer 的状态更新逻辑紧密相关时，使用定制化的 dispatch 是一种清晰且有效的方式来管理这种同步行为。

通过上述方法，开发者可以更好地理解和控制 useRef 和 useReducer 在 React 应用中的行为，编写出更健壮、可预测的代码。

以上就是深入理解React useRef与useReducer的同步更新机制的详细内容，更多请关注其它相关文章！

# 有什么区别 # 晋城哪个网站推广好点的 # 京东家电营销推广方案 # seo实战培训费用多少 # 泰安提供网站优化费用 # 武汉seo推广培训班 # 网站优化生产工艺流程表 # 抖音seo 关键词排名 # 青羊营销推广公司 # 泰州seo网络推广优质团队 # 郴州优化关键词排名 # 的是 # 这一行 # react # 创建一个 # 如何使用 # 表单 # 第二个 # 是在 # 绑定 # 同步更新 # red # 为什么 # 作用域 # 常见问题 # app