根级组件更改导致子路由组件重新渲染

Question

我有一个主要组件在“ /”路由（在index.js上设置）上呈现。 App中有一个通用的搜索栏，显示在其自己的子路线的上方/外侧。基本上，我希望此搜索栏在整个应用程序中通用。只要有更改，搜索栏就会在App状态下更新属性。除了我每次在子路径中的搜索栏中键入内容外，App和当前子路径组件都会重新呈现，因此它在所有路径中都可以正常工作。由于没有属性更改，也无需重新渲染子组件，因此如何防止重新渲染？

// App.js
render()
...
    <SearchBar
      className={classes.searchbar}
      value={(this.state.query && decodeURI(this.state.query)) || ''}
      onChange={this.handleQueryChange}
      inputRef={(el) => el && el.focus()}
      onRequestSearch={this.handleSearch}
      style={{
        margin: '0 auto',
        maxWidth: 800
      }}
    />
...
            <Route
              path="/:projectName/admin"
              render={(props) => (
                <Admin
                  {...commonProps}
                  handleError={this.handleError}
                  updateIsLoadingResults={this.updateIsLoadingResults}
                />
              )}
            />

Answer 1

React并不是天生就知道组件在状态更改时不需要重新呈现子组件。取而代之的是，它会犯错，并在状态发生更改的组件下方重新渲染所有内容。为了告诉React在发生这种情况时不应重新渲染组件，应使用shouldComponentUpdate或React.PureComponent。如果您要以不变的方式管理状态/道具，PureComponent很有用，而shouldComponentUpdate则允许更多自定义逻辑。

我建议对不同的方法进行基准测试，并且仅在看到可测量的性能差异时才使用这些优化。通常，React的渲染速度非常快，除非有必要，否则实际上不会更改DOM。如果您的render函数运行缓慢，建议您调查导致它们运行缓慢的原因并在那里进行优化。

Here是使用PureComponent避免重新渲染的示例。密切注意控制台日志，以查看两个子组件之间的区别。