为什么反应上下文提供程序组件呈现两次[重复]

Question

我在玩 React Context API，发现提供程序在每次值更改时呈现两次。

这就是我所做的。

1. 创建了一个上下文，然后是一个呈现其提供者的组件。
2. 提供程序提供状态值及其设置器。
3. 创建了一个直接渲染其子级的直接子级。
4. 创建了一个消费者，它读取上下文值并添加一个按钮来更改它。
5. 每个组件在呈现时都会执行一个 console.log。
6. 为提供程序添加了一个效果，无需在每次呈现时都记录日志。
7. 在提供程序中添加了一个 ref，该 ref 在每次渲染时递增，并在渲染和效果中记录。

问题？

每次点击按钮更改上下文值时，提供程序渲染两次，但效果只执行一次。

所以 ref 总是递增两次，但效果每次只获取最后一个值（它跳过一个值！）。

此外，在提供程序的第一次渲染时，它会记录两次相同的 ref 值，这对我来说很奇怪。

谁能告诉我为什么会出现这种行为？

代码如下：

提供者：

const MyContext = React.createContext(0);

function Provider({ children }) {
  const state = React.useState("Yes");
  const ref = React.useRef(0);
  ref.current += 1;
  console.log("Context provider ", ref.current);
  React.useEffect(() => {
    console.log("effect on provider, ref value = ", ref.current);
  });

  return <MyContext.Provider value={state}>{children}</MyContext.Provider>;
}

两个孩子

function DirectChild({ children }) {
  console.log("provider direct child");
  return children;
}

function Consumer() {
  console.log("consumer");
  const [state, setState] = React.useContext(MyContext);
  return (
    <div>
      <span>State value: {state}</span>
      <br />
      <button onClick={() => setState(old => old + "Yes")}>Change</button>
    </div>
  );
}

应用程序

export default function App() {
  console.log("APP");
  return (
    <Provider>
      <DirectChild>
        <Consumer />
      </DirectChild>
    </Provider>
  );
}

这是codesandbox demo

Answer 1

找到原因，

没有错误，也没有奇怪的行为，我只是错过了默认情况下在 React.StrictMode 父级中呈现应用程序的代码框。

首先，我将代码移植到本地项目，然后观察到没有问题。

搜索了codesandbox repo问题，发现它与严格模式下的反应行为有关：

预计 setState 更新程序将在开发中以严格模式运行两次。这有助于确保代码不依赖于它们一次运行（如果异步渲染被中止并重新启动，则不会出现这种情况）。如果您的 setState 更新程序是纯函数（它们应该是），那么这不应该影响您的应用程序的逻辑。

Codesandbox issue

React issue

但是，效果只执行一次，错过了我的参考更新。