本文深入探讨了在 React 中结合使用 `useRef` 和 `useReducer` 时，`useRef` 值可能出现更新滞后的现象及其根本原因。通过分析 React 的渲染机制和状态更新的异步性，文章提供了一种定制化 `dispatch` 封装的解决方案，以确保 `useRef` 在 `dispatch` 调用后能立即反映最新值，并给出了详细的代码示例和最佳实践建议。
在使用 React Hooks 进行状态管理时，useRef 和 useReducer 是两个强大的工具。useRef 允许我们创建一个在组件重新渲染时保持不变的可变引用，而 useReducer 则提供了一种更结构化的方式来管理复杂状态。然而，当它们结合使用时，开发者可能会遇到 useRef 的值似乎没有立即更新的困惑。
考虑一个自定义 Hook useCherry，它使用 useReducer 来管理一个数组状态，并尝试通过 useRef 来跟踪一个计数器。
import { useReducer, useRef } from "react";
const useCherry = () => {
const myRef = useRef(0); // 初始化 useRef 计数器
const [state, dispatch] = useReducer(
(state, action) => {
if (action.type === "add") {
// 在 reducer 内部更新 myRef.current
myRef.current += 1;
return [...state, "?"]; // 更新 state
}
return state;
},
[]
);
return [state, dispatch, myRef];
};
export default useCherry;在组件中调用此 Hook，并在按钮点击事件中尝试观察 myRef.current 的值：
// 假设这是 App.js 或其他组件
import React from 'react';
import useCherry from './useCherry'; // 导入自定义 Hook
function App() {
const [state, dispatch, myRef] = useCherry();
return (
<div>
<p>{`Cherry count (state): ${state.length}`}</p>
<button
type="button"
onClick={() => {
console.log(`myRef count before dispatch: ${myRef.current}`); // 预期：0
dispatch({ type: "add" });
console.log(`myRef count after dispatch: ${myRef.current}`); // 预期：1，但实际输出：0
}}
>
Add more cherry
</button>
</div>
);
}
export default App;运行上述代码，你会发现 onClick 事件中的第二个 console.log(myRef.current) 仍然输出 0，而不是预期的 1。这让许多开发者感到困惑，因为 myRef 是一个对象，其 current 属性的修改应该是同步的。
要理解这个现象，我们需要深入了解 React 的工作原理：
实际上，myRef.current 的值在 dispatch 内部确实已经更新了。如果你在 dispatch 触发的下一次渲染中访问 myRef.current，它会是正确的值。问题在于 onClick 函数内部的同步执行流程，它在 dispatch 触发的重新渲染发生之前就完成了。
为了解决这个问题，并确保在 dispatch 调用后能够立即获取到 myRef.current 的最新值，我们需要将 myRef 的更新逻辑与 dispatch 调用进行同步，并将其放在一个自定义的封装函数中。
我们将修改 useCherry Hook，引入一个 myDispatchCherry 函数来封装 dispatch 调用和 myRef 的更新。
// useCherry.js
import { useReducer, useRef } from "react";
const useCherry = () => {
const myRef = useRef(0);
const [state, dispatch] = useReducer(
(state, action) => {
if (action.type === "add") {
// 将 myRef.current 的更新逻辑从 reducer 中移除
return [...state, "?"];
}
return state;
},
[]
);
// 创建一个自定义的 dispatch 封装函数
const myDispatchCherry = (action) => {
if (action?.type === "add") {
myRef.current += 1; // 在调用 dispatch 之前更新 myRef
}
dispatch(action); // 调用原始的 dispatch
};
return { state, dispatch, myRef, myDispatchCherry }; // 返回自定义的 dispatch
};
export default useCherry;// App.js
import React from "react";
import useCherry from "./useCherry"; // 导入自定义 Hook
export default function App() {
// 解构出 myRef 和 myDispatchCherry
const { state, myRef, myDispatchCherry } = useCherry();
return (
<div>
<p>{`Cherry count (state): ${state.length}`}</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，实际输出：1
}}
>
Add more cherry
</button>
</div>
);
}通过这种方式，当 myDispatchCherry 被调用时，myRef.current 会在 dispatch 触发 React 状态更新之前被同步更新。因此，紧随其后的 console.log 就能正确地打印出 1。
在 React 应用中，当 useRef 和 useReducer 结合使用时，如果 useRef 的更新逻辑放在 useReducer 的 reducer 内部，并且你期望在 dispatch 调用后立即在同一个事件处理函数中观察到 useRef 的最新值，可能会因为 React 状态更新的异步性而遇到滞后现象。通过创建一个自定义的 dispatch 封装函数，将 useRef 的更新逻辑与 dispatch 调用同步起来，可以有效解决这个问题，并保持 reducer 的纯粹性，从而编写出更健壮、可预测的 React 代码。
以上就是理解 React 中 useRef 与 useReducer 的交互行为的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
580
收藏
