useRef与useReducer协同使用技巧

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《useRef 与 useReducer 如何协同工作？》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

本文深入探讨了在 React 中结合使用 `useRef` 和 `useReducer` 时，`useRef` 值可能出现更新滞后的现象及其根本原因。通过分析 React 的渲染机制和状态更新的异步性，文章提供了一种定制化 `dispatch` 封装的解决方案，以确保 `useRef` 在 `dispatch` 调用后能立即反映最新值，并给出了详细的代码示例和最佳实践建议。

理解 React 中 useRef 与 useReducer 的交互行为

在使用 React Hooks 进行状态管理时，useRef 和 useReducer 是两个强大的工具。useRef 允许我们创建一个在组件重新渲染时保持不变的可变引用，而 useReducer 则提供了一种更结构化的方式来管理复杂状态。然而，当它们结合使用时，开发者可能会遇到 useRef 的值似乎没有立即更新的困惑。

问题现象：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 的渲染机制与异步更新

要理解这个现象，我们需要深入了解 React 的工作原理：

1. useRef 的 current 属性更新是同步的。 当你在任何地方（包括 reducer 内部）修改 myRef.current 时，这个修改会立即生效。
2. dispatch() 触发的状态更新是异步的。 当你调用 dispatch() 时，React 不会立即重新渲染组件。相反，它会将状态更新安排到未来的某个时间点（通常是当前事件循环结束后，或者在 React 批处理更新期间）。这意味着 dispatch() 调用后的代码会继续执行，而不会等待组件重新渲染。
3. Reducer 函数的执行时机。 useReducer 的 reducer 函数在 dispatch 被调用时执行，计算出新的状态。在这个例子中，myRef.current += 1; 这行代码确实在 reducer 内部执行了，并且 myRef.current 的值被同步更新为 1。
4. console.log 的执行时机。 在 onClick 事件处理函数中：
   • 第一个 console.log 打印的是 dispatch 调用前的 myRef.current (0)。
   • dispatch({ type: "add" }) 被调用，它会同步执行 reducer 函数，将 myRef.current 更新为 1，并安排一次组件重新渲染。
   • 关键点： 第二个 console.log 紧接着 dispatch 调用之后立即执行。此时，尽管 myRef.current 已经被更新为 1，但 React 尚未完成组件的重新渲染。当前 onClick 函数中的闭包仍然捕获的是本次渲染周期的 myRef 对象，并且在 dispatch 触发的下一次渲染完成之前，组件实例（以及其中 myRef 的引用）并不会“刷新”。更准确地说，myRef 对象本身没有变化，myRef.current 的值已经变了。问题在于，onClick 函数是在当前组件实例的上下文中执行的，而 dispatch 触发的重新渲染还没有发生。在同一个事件循环中，即使 myRef.current 已经更新，但我们观察到的行为是，React 的状态更新机制（触发重新渲染）使得我们在 dispatch 之后立即访问 myRef.current 时，可能会与我们预期的在“新”渲染中看到的值产生混淆。

实际上，myRef.current 的值在 dispatch 内部确实已经更新了。如果你在 dispatch 触发的下一次渲染中访问 myRef.current，它会是正确的值。问题在于 onClick 函数内部的同步执行流程，它在 dispatch 触发的重新渲染发生之前就完成了。

解决方案：定制化 dispatch 封装

为了解决这个问题，并确保在 dispatch 调用后能够立即获取到 myRef.current 的最新值，我们需要将 myRef 的更新逻辑与 dispatch 调用进行同步，并将其放在一个自定义的封装函数中。

设计理念：分离关注点与同步更新

• 保持 Reducer 纯净： useReducer 的 reducer 函数应该是一个纯函数，只负责根据当前状态和 action 计算出下一个状态，不应该包含副作用（如直接修改 useRef）。将 myRef 的更新逻辑从 reducer 中移除，有助于保持 reducer 的纯粹性。
• 同步 useRef 更新： 在调用 dispatch 之前或同时，在自定义的封装函数中更新 myRef.current。这样，当 dispatch 被调用时，myRef.current 已经包含了最新的值，并且在 onClick 函数中也能立即观察到。

实现步骤

我们将修改 useCherry Hook，引入一个 myDispatchCherry 函数来封装 dispatch 调用和 myRef 的更新。

1. 修改 useCherry Hook：
   • 将 myRef.current += 1; 从 reducer 中移除。
   • 创建一个新的函数 myDispatchCherry，在该函数内部先更新 myRef.current，再调用原始的 dispatch。
   • 从 Hook 中返回 myDispatchCherry。

// 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;

2. 在组件中使用 myDispatchCherry： 现在，在 App 组件中，我们使用 myDispatchCherry 来替代原始的 dispatch。

// 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。

关键要点与最佳实践

• useRef 更新的同步性： useRef 的 current 属性的修改是同步且即时的。
• React 状态更新的异步性： useState 和 useReducer 的 dispatch 函数会触发异步的状态更新，这些更新会在下一个渲染周期中生效。
• Reducer 的纯粹性： 保持 useReducer 的 reducer 函数为纯函数，只负责计算下一个状态，避免在其中执行副作用（如直接修改 DOM、发起网络请求或修改 useRef 以外的外部可变引用）。
• 副作用管理： 如果需要将 useRef 的更新与 dispatch 关联起来，并且需要在 dispatch 调用后立即观察到 useRef 的最新值，最佳实践是创建一个封装函数来管理这些副作用，确保 useRef 的更新发生在 dispatch 之前或同时。
• 理解渲染周期： 深入理解 React 的渲染机制对于避免这类常见误解至关重要。组件函数在每次渲染时都会执行，但状态更新和副作用的触发时机需要仔细考虑。

总结

在 React 应用中，当 useRef 和 useReducer 结合使用时，如果 useRef 的更新逻辑放在 useReducer 的 reducer 内部，并且你期望在 dispatch 调用后立即在同一个事件处理函数中观察到 useRef 的最新值，可能会因为 React 状态更新的异步性而遇到滞后现象。通过创建一个自定义的 dispatch 封装函数，将 useRef 的更新逻辑与 dispatch 调用同步起来，可以有效解决这个问题，并保持 reducer 的纯粹性，从而编写出更健壮、可预测的 React 代码。

好了，本文到此结束，带大家了解了《useRef与useReducer协同使用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！