javascript - react 性能调试器

Question

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

关于 React 性能工具:

我已经开始使用 react.addons.Perf.printWasted() 进行调试，它一直向我显示以下结果:

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

它想从我的 redux connect 函数中得到什么？我似乎无法完全理解我正在阅读的内容。有什么好的 turorial react 性能调试工具，google 上根本没有。

关于shouldComponentUpdate技术:看了一堆文章，我理解的底线就是简单的复制粘贴:

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

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

真的只有这些吗，还是我遗漏了什么？

Answer 1

What does it want from my redux connect function?

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

“浪费”并不总是意味着不好。它只是意味着完成了一些工作，但它不会影响 DOM 中的任何更改。在 connect() 的情况下，它实际上是有意义的，因为这就是它存在的原因:调用您的 mapStateToProps 并确定是否在下面呈现任何内容。由于您无法控制 connect()ed 组件(它由 React Redux 生成)，因此您实际上无能为力。

另外:我们在谈论什么样的数字？不要担心节省一两毫秒，它们不会产生任何影响。

after reading a bunch of articles, the bottom line I understood is simply copy paste:

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

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

我的建议是使用 shallowCompare React 附带的插件，而且很少。仅当您确实看到它提高了性能时才使用它。不要只是“以防万一”将它放在所有组件上。

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