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

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=生产 webpack -p。

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

避免协调 DOM

警告:您必须处理 props 和 state 的所有可能的条件矩阵(如果需要)，以确保不会搞砸渲染的正确性。

这是必须实现的回调签名。每当任何 state 或 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.