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

2019年7月21日 274次阅读

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

< Route path =“/ positions”component = {PositionsPage} />

最佳答案 这是React整体中非常重要的性能考虑因素(而不仅仅是反应路由器).

默认设计,React为道具或状态的任何更改重新呈现完整的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 =生产webpack -p.

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

避免协调DOM

警告：您必须处理道具和状态的所有可能的条件矩阵(如果需要),以确保您不会弄乱渲染的正确性.

这是必须实现的回调签名.只要任何状态或prop值发生变化,就会调用此方法.

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

Keep in mind that React will invoke this function pretty often, so the
implementation has to be fast.

点赞