我们当前的应用程序每个屏幕都会实现一个AppLayout
组件,该组件需要body
和header
道具。
虽然body
道具通常非常不同,但(非常复杂)header
在各种屏幕之间有很多重复内容。有时只是标题文字正在改变。
目前,从一条路线到另一条路线重新渲染整个屏幕,鉴于相似的内容,这是一个非常浪费的操作。有没有办法避免在两个屏幕之间重新渲染和重新安装常见的子组件?
路由设置示例
这表明在树上似乎重复了很多。
<Route
exact
path='/user'
component={()=> {
return (<AppLayout
header={<AppHeader heading="Users"/>}
main={<UserList/>} />);
} />
<Route
exact
path='/user/new'
component={()=>{
return (<AppLayout
header={<AppHeader heading="Create user"/>}
main={<UserAccountAdd />} />);
} />
<Route
exact
path='/user/:userId'
component={({ match }) =>
return (<AppLayout
header={<AppHeader heading="User profile"/>}
main={<UserAccountInfo userId={match.params.userId}/>}
/>)
} />
AppHeader
组件基本上看起来像
connected(div)
ReallyExpensiveFoo
ReallyExpensiveBar
<p>{this.props.title}</p>
基本上我希望看到呈现标题标题的标题的<p>
标记应该重新加载。
答案 0 :(得分:0)
React不会在每次状态更新时更新整个DOM。相反,它允许每个类组件通过调用其shouldComponentUpdate()
方法来决定是否应该重新呈现它。对于功能组件,它很可能只是简单地比较组件道具来决定组件是否应该重新渲染。
您可以通过将组件转换为类组件并实现自己的shouldComponentUpdate()
版本来避免重新呈现组件。然而,通常没有必要将默认行为(或者例如Redux的connect()
HoC提供的版本)足够聪明以避免不必要的重新呈现并提供良好的应用程序性能。
答案 1 :(得分:0)
React Router在他们的网站上有一个很好的SideBar example非常相关。基本上它在层次结构的不同部分注入成对Route
,因此它们独立更新为路由更改。