Question

我最近开始练习性能增强和调试。

关于反应绩效工具：

我已经开始使用react.addons.Perf.printWasted（）进行调试，它一直向我展示这个结果：

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

我的redux连接功能需要什么？我似乎无法理解我正在阅读的内容。是否有任何良好的反应性能调试工具，谷歌上只有没有。

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

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

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

这真的是它的全部，或者我错过了什么？

Answer 1

我的redux连接功能需要什么？

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

“浪费”并不总是意味着坏事。它只是意味着已经完成了一些工作，但它对DOM中的任何更改都没有影响。在connect()的情况下，它实际上是有意义的，因为它存在的原因是：调用您的mapStateToProps并确定是否在下面呈现任何内容。由于您无法控制connect() ed组件（由React Redux生成），因此您无法对其进行任何操作。

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

在阅读了大量文章之后，我理解的底线就是复制粘贴：
shouldComponentUpdate(nextProps, nextState) {
  return !_.isEqual(this.props, nextProps) ||
    !_.isEqual(this.state, nextState);
}

你在哪里读到这个？这是实现shouldComponentUpdate的非常效率低下的方式，因为它performs a deep comparison。这意味着在深树上它会更慢，实际上，可能比让React重新渲染组件要慢。

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

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

反应性能调试器

1 个答案: