React useRef与useReducer结合使用：解决值不同步问题

新闻中心 NEWS CENTER

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

React useRef与useReducer结合使用：解决值不同步问题

2025-11-06

浏览次数：次

返回列表

react useref与usereducer结合使用：解决值不同步问题

本文深入探讨在React中使用`useRef`与`useReducer`时可能遇到的值不同步问题。通过分析`useRef`的同步可变性和`useReducer`状态更新的异步性，解释了为何在特定场景下`useRef`的值未能按预期立即更新。文章提供了一种优雅的解决方案，通过自定义`dispatch`函数，确保`useRef`的修改与状态调度同步进行，从而避免了常见的陷阱，并维护了reducer的纯洁性。

引言：useRef与useReducer的常见误区

在React函数组件中，useRef和useReducer是两个非常强大的Hook，分别用于处理可变引用和复杂状态逻辑。useRef提供了一个在组件整个生命周期内保持不变的引用对象，其.current属性可以在不触发组件重新渲染的情况下被修改。useReducer则提供了一种替代useState的方案，适用于状态逻辑复杂或下一个状态依赖于上一个状态的场景，通过dispatch函数触发reducer来更新状态。

然而，当这两个Hook结合使用时，开发者可能会遇到一个令人困惑的问题：在调用useReducer的dispatch函数后，useRef的值似乎没有立即更新到预期的新值。这通常发生在尝试在dispatch之后立即读取useRef的最新值时。

问题剖析：同步与异步的交织

要理解这种“值不同步”现象，我们需要深入了解useRef和useReducer的工作机制：

useRef的特性：同步可变性
- useRef返回一个普通的J*aScript对象，其.current属性是可变的。
- 对myRef.current的修改是同步的，即修改后，该值会立即更新。
- 修改myRef.current不会触发组件的重新渲染。
- myRef对象本身在组件的整个生命周期中保持稳定，不会在重新渲染时被重新创建。
useReducer的特性：状态更新的异步性
- dispatch函数用于调度状态更新。
- 当dispatch被调用时，它会同步执行reducer函数，计算出新的状态。
- 然而，React并不会立即使用这个新状态来重新渲染组件。状态更新和组件的重新渲染通常是异步的，React会批处理这些更新以优化性能。
- 这意味着，在调用dispatch之后，直到下一个渲染周期，组件内部（例如，在同一个事件处理函数中）可能仍然观察到旧的状态值。

原始代码的问题所在：

考虑以下示例代码，它尝试在useReducer的reducer内部修改myRef.current：

import { useReducer, useRef } from "react";

const useCherry = () => {
    const myRef = useRef(0); // myRef是一个稳定的引用

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

    return [state, dispatch, myRef];
};

export default function App() {
  const [state, dispatchCherry, myRef] = useCherry();
  return (
    <div>
      <p>{`Cherry: ${state}`}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1186">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680124823650.jpg" alt="BrandCrowd">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1186">BrandCrowd</a>
                            <p>一个在线Logo免费设计生成器</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="BrandCrowd">
                                <span>200</span>
                            </div>
                        </div>
                        <a href="/ai/1186" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="BrandCrowd">
                        </a>
                    </div>
                
      <button
        type="button"
        onClick={() => {
            console.log(`myRef count before adding: ${myRef.current}`); // 预期: 0
            dispatchCherry({ type: "add" }); // 调用dispatch，reducer执行，myRef.current理论上会变为1
            console.log(`myRef count after adding: ${myRef.current}`); // 预期: 1，但实际可能仍为0
        }}
      >
        Add more cherry
      </button>
    </div>
  );
}

尽管myRef.current += 1在reducer内部是同步执行的，且myRef本身是一个稳定的引用，但如果在onClick事件处理函数中，紧接着dispatchCherry之后立即读取myRef.current，可能会发现它仍然是旧值。这可能是由于以下几个原因：

Reducer的纯洁性原则： Reducer函数应是纯函数，不应包含副作用（如直接修改外部引用myRef.current）。将副作用放入reducer会使状态管理变得难以预测和调试。
React的批处理机制： 即使myRef.current在reducer中被同步更新，React处理事件和状态更新的机制可能导致在同一个事件循环周期内，外部的console.log未能及时“感知”到这个更新，尤其是在某些React版本或特定场景下。更常见且推荐的做法是将副作用与状态更新分离。

为了解决这个问题，并遵循React的最佳实践，我们需要将useRef的更新逻辑从reducer中分离出来。

解决方案：自定义dispatch函数

解决此问题的核心思想是：将useRef的更新操作从reducer中剥离，并将其与dispatch调用封装在一个自定义函数中。这样，我们可以在调用原始dispatch之前或之后，同步地更新useRef的值，从而确保在同一个事件处理周期内，useRef的值是最新且可观察的。

实现步骤：

保持Reducer纯净： 将myRef.current += 1从reducer中移除。reducer只负责根据action计算并返回新的状态。
创建自定义dispatch包装器： 在useCherry Hook内部创建一个新的函数，例如myDispatchCherry。
封装逻辑： 在myDispatchCherry中，首先执行myRef.current的更新操作，然后调用原始的dispatch函数来更新状态。
导出自定义函数： 将myDispatchCherry作为Hook的返回值之一导出。

示例代码：

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

const useCherry = () => {
    const myRef = useRef(0); // useRef保持不变

    const [state, dispatch] = useReducer(
        (state, action) => {
            if (action.type === "add") {
                // Reducer现在是纯净的，不包含副作用
                return [...state, "?"];
            }
            return state;
        },
        []
    );

    // 自定义dispatch函数，封装了useRef的更新和状态调度
    const myDispatchCherry = (action) => {
      if (action?.type === "add") {
          myRef.current += 1; // 在调用原始dispatch之前，同步更新myRef.current
      }
      dispatch(action); // 调度状态更新
    }

    // 导出状态、原始dispatch、useRef和自定义dispatch
    return {state, dispatch, myRef, myDispatchCherry};
};

export default function App() {
  // 从useCherry Hook中解构出所需的值，包括自定义的myDispatchCherry
  const {state, myRef, myDispatchCherry} = useCherry();
  return (
    <div>
      <p>{`Cherry: ${state}`}</p>
      <button
        type="button"
        onClick={() => {
            console.log(`myRef count before adding: ${myRef.current}`); // 预期: 0
            myDispatchCherry({ type: "add" }); // 调用自定义的dispatch
            console.log(`myRef count after adding: ${myRef.current}`); // 预期: 1 (现在可以正确观察到更新)
        }}
      >
        Add more cherry
      </button>
    </div>
  );
}

通过这种方式，当myDispatchCherry被调用时，myRef.current会立即被更新，然后dispatch才会被调用来调度状态更新。因此，在myDispatchCherry调用之后的console.log能够准确地反映出myRef.current的最新值。