反应性能调试器

Question

我最近开始练习性能增强和调试反应.

关于反应性能工具:

我已经开始使用react.addons.Perf.printWasted()进行调试,它一直向我展示这个结果:

"AlertRow > Connect(AlertsBottomPanel)"
"Connect(AlertsBottomPanel) > AlertsBottomPanel"

它对我的redux连接功能有什么要求？我似乎无法理解我正在阅读的内容.是否有任何良好的turorial反应性能调试工具,谷歌上根本就没有.

关于shouldComponentUpdate技巧:在阅读了大量文章之后,我理解的底线就是复制粘贴:

shouldComponentUpdate(nextProps, nextState) {
  return !_.isEqual(this.props, nextProps) ||
    !_.isEqual(this.state, nextState);
}

我读了这篇好文章:http://benchling.engineering/performance-engineering-with-react/

那是真的有它,还是我错过了什么？

Answer 1

它对我的redux连接功能有什么要求？

它并不"想要"任何东西,它只是说connect()Redux花了一些工作来确定你的道具是否已经改变,但他们没有,所以在某种程度上,这项工作被浪费了.

"浪费"并不总是意味着坏事.它只是意味着已经完成了一些工作,但它对DOM中的任何更改都没有影响.如果connect()它确实有意义,因为它存在的原因是:调用你的mapStateToProps并确定是否在下面呈现任何东西.由于您无法控制connect()ed组件(它由React Redux生成),因此您无法对其进行任何操作.

另外:我们在谈论什么样的数字？不要担心保存一到两毫秒,它们不会有任何区别.

看完一堆文章后,我理解的底线就是复制粘贴:

shouldComponentUpdate(nextProps, nextState) {
  return !_.isEqual(this.props, nextProps) ||
    !_.isEqual(this.state, nextState);
}

你在哪里读到这个？这是一种非常低效的实施方式,shouldComponentUpdate因为它进行了深入的比较.这意味着在深树上它会慢一些,实际上,这可能比让React重新渲染组件要慢.

我的建议是使用React附带的shallowCompare插件,并谨慎使用.只有在您真正看到它可以提高性能时才使用它.不要只是把它放在所有组件上"以防万一".

最后,不要忘记使用生产React构建实际检查应用程序的性能.它可以比开发版本快5到10倍,因此请确保不优化不需要优化的内容.