我在顶层有许多导航链接,当您在链接之间切换时,它们可以切换页面级组件。有些页面具有复杂的网格组件,创建成本很高。我注意到react-router在每次页面切换时都会构造组件。有没有办法缓存传递到路由的组件?,即 PositionsPage
<Route path="/positions" component={PositionsPage} />
最佳答案
这是整个 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.
关于reactjs - 防止切换链接时react-router重新创建组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38460633/