reactjs - useReducer Action 调度两次

Question

场景

我有一个返回操作的自定义 Hook 。 父组件“Container”利用自定义钩子(Hook)并将操作作为 prop 传递给子组件。

问题

当从子组件执行操作时，实际调度会发生两次。 现在，如果子级直接使用钩子(Hook)并调用操作，则调度仅发生一次。

如何重现它:

打开下面的沙箱并在 Chrome 上打开开发工具，以便您可以看到我添加的控制台日志。

https://codesandbox.io/s/j299ww3lo5?fontsize=14

Main.js(子组件)您将看到我们调用 props.actions.getData()

在 DevTools 上，清除日志。 在预览中，在表单上输入任意值，然后单击 按钮。 在控制台日志上，您将看到像 redux-logger 这样的操作，并且您会注意到 STATUS_FETCHING 操作执行了两次而不更改状态。

现在转到 Main.js 并注释掉第 9 行并取消注释第 10 行。我们现在基本上直接使用自定义 Hook 。

在 DevTools 上，清除日志。 在预览中，在表单上输入任意值，然后单击 按钮。 在控制台日志上，现在您将看到 STATUS_FETCHING 仅执行了一次，并且状态发生相应变化。

虽然没有明显的性能损失，但我无法理解为什么会发生这种情况。我可能太专注于钩子(Hook)，而我错过了一些如此愚蠢的东西......请让我从这个谜题中解脱出来。谢谢!

Answer 1

首先澄清现有的行为，STATUS_FETCHING 操作实际上只被"dispatch"一次(即，如果您在 console.log 内的 dispatch 调用 getData 之前执行 useApiCall.js )一次，但是 reducer 代码执行了两次。

如果不是我在写这个有点相关的答案时进行的研究，我可能不知道要寻找什么来解释原因:React hook rendering an extra time .

您会发现该答案中显示了以下来自 React 的代码块:

  var currentState = queue.eagerState;
  var _eagerState = _eagerReducer(currentState, action);
  // Stash the eagerly computed state, and the reducer used to compute
  // it, on the update object. If the reducer hasn't changed by the
  // time we enter the render phase, then the eager state can be used
  // without calling the reducer again.
  _update2.eagerReducer = _eagerReducer;
  _update2.eagerState = _eagerState;
  if (is(_eagerState, currentState)) {
    // Fast path. We can bail out without scheduling React to re-render.
    // It's still possible that we'll need to rebase this update later,
    // if the component re-renders for a different reason and by that
    // time the reducer has changed.
    return;
  }

特别是，请注意指示 React 可能必须重做一些工作如果 reducer 已更改的注释。问题是在你的 useApiCallReducer.js 中您在 useApiCallReducer 中定义了您的 reducer 自定义 Hook 。这意味着在重新渲染时，即使 reducer 代码相同，您每次也会提供新的 reducer 函数。除非您的 reducer 需要使用传递给自定义 Hook 的参数(而不是仅使用传递给 reducer 的 state 和 action 参数)，否则您应该在外部级别定义 reducer (即不嵌套在另一个函数中)。一般来说，我建议避免定义嵌套在另一个函数中的函数，除非它实际上使用嵌套范围内的变量。

当React在重新渲染后看到新的reducer时，它必须放弃之前在尝试确定是否需要重新渲染时所做的一些工作，因为新的reducer可能会产生不同的结果。这只是 React 代码中性能优化细节的一部分，您通常不需要担心，但值得注意的是，如果您不必要地重新定义函数，您最终可能会破坏一些性能优化。

为了解决这个问题，我更改了以下内容:

import { useReducer } from "react";
import types from "./types";

const initialState = {
  data: [],
  error: [],
  status: types.STATUS_IDLE
};

export function useApiCallReducer() {
  function reducer(state, action) {
    console.log("prevState: ", state);
    console.log("action: ", action);
    switch (action.type) {
      case types.STATUS_FETCHING:
        return {
          ...state,
          status: types.STATUS_FETCHING
        };
      case types.STATUS_FETCH_SUCCESS:
        return {
          ...state,
          error: [],
          data: action.data,
          status: types.STATUS_FETCH_SUCCESS
        };
      case types.STATUS_FETCH_FAILURE:
        return {
          ...state,
          error: action.error,
          status: types.STATUS_FETCH_FAILURE
        };
      default:
        return state;
    }
  }
  return useReducer(reducer, initialState);
}

改为:

import { useReducer } from "react";
import types from "./types";

const initialState = {
  data: [],
  error: [],
  status: types.STATUS_IDLE
};
function reducer(state, action) {
  console.log("prevState: ", state);
  console.log("action: ", action);
  switch (action.type) {
    case types.STATUS_FETCHING:
      return {
        ...state,
        status: types.STATUS_FETCHING
      };
    case types.STATUS_FETCH_SUCCESS:
      return {
        ...state,
        error: [],
        data: action.data,
        status: types.STATUS_FETCH_SUCCESS
      };
    case types.STATUS_FETCH_FAILURE:
      return {
        ...state,
        error: action.error,
        status: types.STATUS_FETCH_FAILURE
      };
    default:
      return state;
  }
}

export function useApiCallReducer() {
  return useReducer(reducer, initialState);
}

当 reducer 具有需要在另一个函数中定义的依赖性(例如， Prop 或其他状态)时，以下是此问题的变体的相关答案:React useReducer Hook fires twice / how to pass props to reducer?

下面是一个非常人为的示例，演示了渲染期间 reducer 发生更改需要重新执行的场景。您可以在控制台中看到，第一次通过其中一个按钮触发 reducer 时，它会执行两次 - 一次使用初始 reducer (addSubtractReducer)，然后再次使用不同的 reducer (multiplyDivideReducer)。后续的调度似乎会无条件地触发重新渲染，而无需首先执行reducer，因此仅执行正确的reducer。如果您首先调度“nochange”操作，您可以在日志中看到特别有趣的行为。

import React from "react";
import ReactDOM from "react-dom";

const addSubtractReducer = (state, { type }) => {
  let newState = state;
  switch (type) {
    case "increase":
      newState = state + 10;
      break;
    case "decrease":
      newState = state - 10;
      break;
    default:
      newState = state;
  }
  console.log("add/subtract", type, newState);
  return newState;
};
const multiplyDivideReducer = (state, { type }) => {
  let newState = state;
  switch (type) {
    case "increase":
      newState = state * 10;
      break;
    case "decrease":
      newState = state / 10;
      break;
    default:
      newState = state;
  }
  console.log("multiply/divide", type, newState);
  return newState;
};
function App() {
  const reducerIndexRef = React.useRef(0);
  React.useEffect(() => {
    reducerIndexRef.current += 1;
  });
  const reducer =
    reducerIndexRef.current % 2 === 0
      ? addSubtractReducer
      : multiplyDivideReducer;
  const [reducerValue, dispatch] = React.useReducer(reducer, 10);
  return (
    <div>
      Reducer Value: {reducerValue}
      <div>
        <button onClick={() => dispatch({ type: "increase" })}>Increase</button>
        <button onClick={() => dispatch({ type: "decrease" })}>Decrease</button>
        <button onClick={() => dispatch({ type: "nochange" })}>
          Dispatch With No Change
        </button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);