切换链接时防止反应路由器重新创建组件

Question

我在顶层有许多导航链接，当您在链接之间切换时，它们可以切换页面级组件。某些页面具有创建成本高昂的复杂网格组件。我注意到每次切换页面时 react-router 都会构造组件。有没有办法缓存传递到路由中的组件？，即 PositionsPage

<Route path="/positions" component={PositionsPage} />

Answer 1

这是 React 整体（而不仅仅是react-router）中非常重要的性能考虑因素。

props默认设计下，React 会针对或中的任何更改重新渲染完整的 DOM 树state。

以下是React 高级性能文档建议的技术摘要。

使用生产版本

注意：组件的正确性会自动得到处理。没什么好担心的。

这应该是相当简单的。以下webpack.config.js插件部分片段应确保变量NODE_ENV到达 React 源代码。

  ...
  plugins: [
    new CommonsChunkPlugin('bundle.js'),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
  ...

现在只需确保NODE_ENV=production webpack -p.

propTypes这可确保跳过所有这些警告/错误和检查。

避免协调 DOM

警告：您必须处理 和 的所有可能的条件矩阵（如果需要）props，state以确保不会破坏渲染的正确性。

这是必须实现的回调签名。state每当任何或值发生变化时都会调用此函数prop。

shouldComponentUpdate: function(nextProps, nextState) {
  // @TODO your logic here
  // return true to update, false otherwise
  return true;
}

请记住，React 会经常调用此函数，因此实现必须很快。