本文深入探讨在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返回一个普通的JavaScript对象，其.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>
<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的最新值。
注意事项与最佳实践
- Reducer的纯洁性： 始终强调reducer应是纯函数，不应有副作用。所有对外部变量（如useRef.current）的修改都应发生在reducer之外，
