一个组件更新时，是否可以防止所有映射的组件重新映射？

问题描述

我有一个react应用，该应用使用“站点地图”数组构建应用，如下所示：

const siteMap = [
  Page1: [
     SubPage1:[
       App1: {
         name: "App1",more app info...
       },App2: {
         name: "App2",...
     ],...
  ],...
]

使用siteMap数组，应用程序通过映射创建页面，子页面和应用程序。我的问题是组件更新时，该级别的所有组件都会重新映射。例如，如果某个应用程序组件更新，则所有应用程序都将重新映射。

可能值得注意的是，所有相关组件都是功能组件。此外，该应用程序还使用React.lazy（）导入并渲染动态调用的组件。

下面的代码是该应用程序的缩写版本：

//Page Component
const Page= (props) => {
return (
   <div>
      {siteMap.map((page) => <SubPage pageData={page})}
   </div>
)
export default Page;


//SubPage Component  
const SubPage= (props) => {
return (
   <div>
      {props.pageData.map((subPage) => <App appData={subPage})}
   </div>
)
export default SubPage;


//App Component    
const App = (props) => {
return (
   <div>
      {props.appData.map((app) => {
         const Icon = React.lazy(() => import(`./${app.name}`));
         return (
            <Suspense fallback={<div>Loading...</div>}>
               <Icon />
            </Suspense>
         )
      })}
      {app info...}
   </div>
)
export default App;

是什么使一组映射的组件重新映射/渲染？如果您有一个映射到组件的对象数组，那么当其中一个组件更新时，如何防止该数组重新映射（以及重新渲染所有组件）？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）