普通的孩子,但不同的根:可以避免重新渲染和重新安装在孩子身上?

时间:2017-11-09 08:15:00

标签: reactjs optimization react-router

我们当前的应用程序每个屏幕都会实现一个AppLayout组件,该组件需要bodyheader道具。

虽然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>标记应该重新加载。

2 个答案:

答案 0 :(得分:0)

React不会在每次状态更新时更新整个DOM。相反,它允许每个类组件通过调用其shouldComponentUpdate()方法来决定是否应该重新呈现它。对于功能组件,它很可能只是简单地比较组件道具来决定组件是否应该重新渲染。

您可以通过将组件转换为类组件并实现自己的shouldComponentUpdate()版本来避免重新呈现组件。然而,通常没有必要将默认行为(或者例如Redux的connect() HoC提供的版本)足够聪明以避免不必要的重新呈现并提供良好的应用程序性能。

答案 1 :(得分:0)

React Router在他们的网站上有一个很好的SideBar example非常相关。基本上它在层次结构的不同部分注入成对Route,因此它们独立更新为路由更改。