本文探讨了在react中使用`useref`和`usereducer`时，`useref`值无法在`dispatch`调用后立即更新的常见问题。通过分析react的异步渲染机制，揭示了`dispatch`调度更新与组件重新渲染之间的时序差异。文章提出并详细演示了通过定制化`dispatch`函数来同步更新`useref`的解决方案，确保在同一事件周期内获取到`useref`的最新值，从而优化组件行为和数据管理。
在React函数组件中，useRef和useReducer是两个非常强大的Hooks，分别用于在多次渲染之间持久化可变值和管理复杂的状态逻辑。然而，当它们结合使用时，开发者可能会遇到一个常见的困惑：useRef的值在useReducer的dispatch函数调用后，似乎没有立即更新。这通常是由于对React的更新机制理解不足所致。
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。这个 ref 对象在组件的整个生命周期内保持不变。重要的是，直接修改 ref.current 不会触发组件重新渲染。useRef 常用于访问 DOM 元素、存储任何可变值（如定时器 ID、计数器等）而无需触发重新渲染。
useReducer 是 useState 的替代方案，用于处理更复杂的 state 逻辑。它接收一个 reducer 函数和一个初始 state，并返回当前的 state 以及一个 dispatch 函数。调用 dispatch 函数会向 reducer 发送一个 action，reducer 根据 action 计算出新的 state。与 useState 类似，dispatch 调用会调度一次组件重新渲染，但这个渲染是异步的，不会立即发生。
考虑以下场景，我们创建一个自定义 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 的更新调度机制是异步的。
真正的症结在于： 虽然 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。
如果外部的 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 调用后立即获取到 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 函数，我们实现了以下目标：
通过上述方法，开发者可以更好地理解和控制 useRef 和 useReducer 在 React 应用中的行为，编写出更健壮、可预测的代码。
以上就是深入理解React useRef与useReducer的同步更新机制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
982
收藏
