React 组件被重新渲染

Question

我有一个重新渲染的 React 包装组件。这实际上与微前端的包装器有关。

如何找出导致它突然重新渲染的原因，即使控件现在位于子 MFE 中并且此包装器实际上位于父应用程序中？

const MyComponent = React.lazy(() => import('myMfe/MyComponent'))
const MyComponentWrapper = (props)=>{
  console.log("props",props);
  return(
    <div>
      <React.Suspense  fallback={<Spinner />}>
        <MyComponent {...props}/>
      </React.Suspense>
    </div>
  )
};

export default MyComponentWrapper;

高层流程如下；

Parent（App.js）有一些路由映射如下；

<Route exact path="/Path1">
     <MyComponentWrapper url={user} />
</Route>

然后我有上面的包装器，即 MyComponentWrapper

然后是子应用程序，我有相同的路由映射，但在子应用程序路由映射中，它解析为要在屏幕上渲染的实际组件，如下所示

<Route exact path="/Path1">
     <MyChildComponent />
</Route>

更新

我尝试使用 React.memo 来防止重新渲染...但即使在那之后，组件仍然会重新渲染。同样，这个组件的父组件，即 App 组件不会重新渲染，只有这个组件

const MyComponent = React.lazy(() => import('myMfe/MyComponent'))
const MyComponentWrapper = React.memo((props)=>{
  console.log("props",props);
  return(
    <div>
      <React.Suspense  fallback={<Spinner />}>
        <MyComponent {...props}/>
      </React.Suspense>
    </div>
  )
});

export default MyComponentWrapper;

Answer 1

在包装器组件内添加 console.log 语句来记录道具并查看它们在渲染之间是否发生变化。