如何解决一个组件更新时,是否可以防止所有映射的组件重新映射?
我有一个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 举报,一经查实,本站将立刻删除。