时间戳

首页 > 解决方案 > 为什么 React 组件在使用observer() 包裹时会渲染两次？

mobx - 为什么 React 组件在使用observer() 包裹时会渲染两次？

问题描述

简单地包装 React 组件observer()似乎会导致它们渲染两次。可能的原因是什么？我正在运行最新版本的 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;

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

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

标签： mobxmobx-react

解决方案

我应该在发布问题之前完成我正在处理的代码框，尽管这可能会为其他人节省痛苦和浪费时间。事实证明，发生双重渲染的原因是因为我正在使用React.StrictMode. 有趣的是，双重渲染React.StrictMode似乎只在组件被包装时发生observer() Here is the codesandbox。 React.StrictMode在整个应用程序（index.js）中使用，如果删除，双重渲染停止。

推荐阅读