正如您所指出的，原因与您链接到的我的相关答案相同。每当Provider重新渲染时，您都会重新创建减速器，因此在某些情况下，React 将执行减速器以确定它是否需要重新渲染Provider，如果确实需要重新渲染，它将检测减速器改变了，所以 React 需要执行新的 reducer 并使用它产生的新状态，而不是之前版本的 reducer 返回的状态。

当由于对 props 或上下文或其他状态的依赖而不能将 reducer 移出函数组件时，解决方案是使用 记住您的 reducer useCallback，以便您仅在其依赖项发生变化时才创建新的 reducer（例如productsList在您的案件）。

要记住的另一件事是，您不必太担心您的减速器为一次分派执行两次。React 所做的假设是 reducer 通常足够快（它们不能做任何有副作用的事情，进行 API 调用等），因此在某些场景中需要重新执行它们的风险是值得的为了尽量避免不必要的重新渲染（如果在带有 reducer 的元素下面有一个大的元素层次结构，这可能比 reducer 昂贵得多）。

这是Providerusing的修改版本useCallback：

const Context = React.createContext();
const Provider = props => {
  const memoizedReducer = React.useCallback(createReducer(productsList), [productsList])
  const [state, dispatch] = React.useReducer(memoizedReducer, []);

  return (
    <Context.Provider value={{ state, dispatch }}>
      {props.children}
    </Context.Provider>
  );
}

这是您的 codepen 的修改版本：https ://codepen.io/anon/pen/xBdVMp ? editors = 0011

useCallback如果您不熟悉如何使用此钩子，这里有几个与此相关的答案可能会有所帮助：

• React Hooks useCallback 的简单示例有问题
• React Hooks useCallback 导致孩子重新渲染

将 Reducer 与帮助我解决问题的功能组件分开

一个基于 Ryans 优秀答案的例子。

  const memoizedReducer = React.useCallback((state, action) => {
    switch (action.type) {
      case "addRow":
        return [...state, 1];
      case "deleteRow":
        return [];
      default:
        throw new Error();
    }
  }, []) // <--- if you have vars/deps inside the reducer that changes, they need to go here

  const [data, dispatch] = React.useReducer(memoizedReducer, _data);

当我阅读一些useContext源代码时，我发现

const useContext = hook(class extends Hook {
  call() {
    if(!this._ranEffect) {
      this._ranEffect = true;
      if(this._unsubscribe) this._unsubscribe();
      this._subscribe(this.Context);
      this.el.update();
    }
  }

第一次更新effect后，更新后会调用一个like。在value订阅正确的上下文后，例如，解析来自 的值Provider，它请求另一个更新。由于_ranEffect标志，这不是循环。

在我看来，如果上述情况成立React，渲染引擎将被调用两次。