Question

我正在使用React Router，并且由于需要将需要组件的函数传递到路由中，因此需要使用render prop来渲染组件。但是，将路线作为渲染道具传递始终会导致组件重新渲染。我已经尝试了所有可能的lifeCycle挂钩，例如shouldComponentUpdate和ComponentDidUpdate，但是没有什么可以阻止组件重新呈现。此路由结构如下所示：

Route1：

<Route
  path='/dashboard'
  render={() => dashboardOperator(<Dashboard />)}
/>

相反，如果我只是以传统方式传递组件，则它不会触发自动重新渲染。

Route2：

 <Route
     path="/dashboard"
     component={DashboardComponent}
 />

但是，这种路由方法无效，因为它不允许将函数传递到路由中。

由于生命周期挂钩似乎无法有效地阻止Route1（渲染道具方法）重新渲染组件，因此我该如何使用渲染道具（或另一种方法）并防止不必要的组件重新渲染？ / p>

Answer 1

尝试这样的事情：

class App extends React.PureComponent {
  renderDashboardPage() {
    return dashboardOperator(<Dashboard />)
  }

  render() {
    return (
      <Route
        path='/dashboard'
        render={this.renderDashboardPage}
      />
    );
  }
}

这应该起作用，因为在重新渲染时函数/对象引用保持不变，因此React将意识到道具没有改变。虽然，但要注意过早的优化。

React Router Render Pro路线总是重新渲染组件

1 个答案: