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

【问题标题】：Prevent react-router re-creating component when switching links切换链接时防止react-router重新创建组件
【发布时间】：2016-11-22 11:20:36
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

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

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

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

使用生产版本

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

这应该相当简单。以下webpack.config.js 插件部分 sn-p 应确保 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 会经常调用这个函数，所以实施必须很快。

【讨论】：

我知道这些先进的性能技术，我已经在我的代码中实现了这些技术。我的想法是 react-router 应该支持一种模式，其中链接可以表示为选项卡式窗格中的选项卡。在某些情况下，更希望显示/隐藏组件而不是每次都重建它们。也许有一种方法可以使用可编程 API 添加历史记录，这样我就可以通过 url 访问这些选项卡之一，但自己执行显示/隐藏。
API 可用。 browserHistory.push 是你用来添加到浏览器的History API 的。
而且我不认为 React Router 可以而且应该添加这样的功能。因为 React 路由器不知道您要放入哪些组件以及它们的行为方式。所以每个组件无论如何都必须实现自己的更新行为。

【解决方案2】：

您可以将昂贵的组件组合在一起，并使用 css 样式隐藏您不需要的部分。

【讨论】：