代码之家 › 专栏 › 技术社区 › user994165

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

react-router reactjs

0

user994165 · 技术社区 · 6 年前

我有一个在“/”路径上渲染的主要组件(设置在index.js). 在应用程序中有一个公共搜索栏,它呈现在它自己的子路由之上/之外。基本上我希望这个搜索栏在整个应用程序中是通用的。只要有更改,搜索栏就会更新应用程序状态的属性。它在所有路由中都正常工作,除了每次我在子路由的搜索栏中键入时,应用程序和当前子路由组件都会被重新呈现。既然没有属性更改,也不需要重新渲染子组件,我如何防止这种重新渲染?

// 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}
                />
              )}
            />

1 回复 | 直到 6 年前

1

Tyler 6 年前

React并不知道组件在状态更改时不需要重新呈现子组件。相反,它在谨慎方面出错,并重新呈现发生状态更改的组件下面的所有内容。要告诉React在发生这种情况时不应重新渲染组件,应该使用 shouldComponentUpdate React.PureComponent PureComponent 如果您以不变的方式管理状态/道具,那么 shouldComponentUpdate 允许更多自定义逻辑。

render 函数是慢的,我建议研究是什么使它们慢,并在那里优化。

Here 是一个使用以避免重新渲染。注意控制台日志,查看两个子组件之间的差异。