为什么 React 组件在用 observer() 包装时渲染两次？

Question

用

observer()

简单地包装 React 组件似乎会导致它们渲染两次。可能的原因是什么？我正在运行最新版本的 react 16.8.3、mobx 5.9.4 和 mobx-react-lite 1.2.0

例如：

import React from "react";
import { observer } from "mobx-react-lite";

const Item = observer(() => {
  return (
    <div>
      {console.log("render item")}
      Item
    </div>
  );
});

export default Item;

这是在一个相对复杂的应用中发生的。我在调试另一个问题时注意到了这种行为。然后，我删除了尽可能多的代码，并能够在一个非常简单的案例中重现该问题。

编辑：请参阅下面的答案。我能够通过尝试使用 codesandbox 进行回购来确定问题。

Answer 1

我应该在发布问题之前完成我正在处理的codesandbox，尽管这可能会节省其他人的痛苦和浪费的时间。事实证明，出现双重渲染的原因是因为我使用的是

React.StrictMode

。有趣的是，带有

React.StrictMode

的双重渲染似乎只发生在组件被

observer()

包裹时。这是 codesandbox。

React.StrictMode

用于整个应用程序 (index.js)，如果删除，双重渲染将停止。

Answer 2

开发模式是这样，prod没有问题