Question

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

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

Answer 1

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

默认情况下，React会针对props或state中的任何更改重新呈现完整的DOM树。

以下是React documentation for Advanced Performance建议的技术摘要。

使用生产版本

注意：自动处理组件的正确性。没什么可担心的。

这应该相当简单。以下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会经常调用此函数，所以实施必须快速。

Answer 2

您可以将昂贵的组件合并为一个，只需隐藏css样式不需要的部分。

在切换链接时防止react-router重新创建组件

2 个答案:

使用生产版本

避免协调DOM