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;

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

编辑：请参见下面的答案。通过尝试使用codeandbox进行回购，我能够确定问题所在。

Answer 1

在发布问题之前，我应该已经完成了codesandbox的工作，尽管这可以节省其他人的痛苦和时间。事实证明，发生双重渲染的原因是因为我正在使用React.StrictMode。有趣的是，React.StrictMode的双重渲染似乎仅在用observer()包装组件时出现。这是codesandbox。 React.StrictMode在整个应用程序（index.js）中使用，如果删除，则双重渲染停止。

为什么React组件在被Observer（）包装后呈现两次？

1 个答案: