为了首先阐明现有行为，实际上仅“调度”了STATUS_FETCHING操作（即，如果您在内console.log的dispatch调用之前做的是正确的操作）一次，而reducer代码执行了两次。getData``useApiCall.js

写这个有点相关的答案时，我可能不知道要寻找什么来解释为什么不是我的研究目的：
您将在该答案中找到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;
  }

特别要注意的是， 如果reducer已更改
，则注释指示React可能必须重做一些工作。问题是useApiCallReducer.js您在useApiCallReducer自定义钩子中定义了减速器。这意味着在重新渲染时，即使化简器代码相同，您也每次都提供新的化简器功能。除非您的化合器需要使用传递给自定义钩子的参数（而不是仅使用传递给化合器的stateand
action参数），否则您应该在外部级别（即不嵌套在另一个函数中）定义化合器。通常，我建议避免定义一个嵌套在另一个函数中的函数，除非它实际上使用了嵌套函数中的变量。

当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进行更改需要重新执行它。您可以在控制台中看到，第一次通过一个按钮触发减速器时，它将执行两次-
一次使用初始减速器（addSubtractReducer），然后再次使用其他减速器（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);