【发布时间】：2018-07-12 20:19:49
【问题描述】：
我正在使用 Chrome 开发人员工具对使用 ag-grid-react 的 SPA React (15.6) 应用程序进行一些性能分析，但我在将分析器的输出与现实相协调时遇到了一些麻烦。例如，在下面的屏幕截图中，连接的抽屉组件 (Connect(Drawer), 橙色条) "componentWillReceiveProps" 方法似乎需要大约 2 秒，但其下方没有任何内容。在查看了该方法本身可能需要这么长时间的代码后，我对此表示怀疑，因此我在函数内的所有代码周围添加了一些“console.time”语句，并且低看：
抽屉组件WillReceiveProps：0.02001953125ms
这是我的 componentWillReceiveProps 的样子，供参考：
componentWillReceiveProps(nextProps) {
console.time('Drawer componentWillReceiveProps');
if (nextProps.changes.length !== this.props.changes.length &&
nextProps.changes.length === 0 &&
this.state.isDiscarding) {
this.setState({isDiscarding: false});
}
console.timeEnd('Drawer componentWillReceiveProps');
}
那么我在这里错过了什么？我（有点）明白用户计时 api 只显示标记的东西（我今天才刚刚了解这个，所以我对该 api 的理解至少可以说......），所以它只是如果 React 实际上没有计时 componentWillReceiveProps 内部发生的事情？如果有用，我正在使用重新选择和 Redux，但我会假设我的选择器在调用 componentWillReceiveProps 之前已经运行，但也许我错了？
无论如何，我认为 Chrome 火焰图有一些我不了解的基本内容，但我阅读了很多文章，但对我来说并不适用。
更新：添加了 componentWillReceiveProps 实现
更新 2：添加指向 Chrome 个人资料的链接
如果有人有兴趣查看此处的实际配置文件链接，您可以通过打开 Chrome 开发工具，转到性能选项卡，然后单击“加载配置文件”来查看它：
https://www.dropbox.com/s/72e9kwyxr0myec3/delete_react_perf_user_timing?dl=0
更新 3：componentWillReceiveProps 说明
好的，看来 componentWillReceiveProps 确实（以某种方式）最终调用了 mapStateToProps，这可以解释为什么它看起来在配置文件中花费了这么长时间。 我猜想 componentWillReceiveProps 调用会被 redux connect 方法或类似的方法取代以完成它的工作，但我还没有验证 查看接受的答案。 无论如何，您可以在以下屏幕截图中看到这方面的证据：
【问题讨论】：
-
您的抽屉收到的道具是什么？查看 HEAP - 在 ComponentWillReceiveProps 期间，您会看到内存使用的巨大变化，上升 250MB，然后下降 350MB。但是，我不肯定这与您的性能问题之间存在任何关联。
-
在屏幕截图顶部的堆中，在调用我的函数期间，堆方面的情况似乎没有发生巨大变化，我读错了吗？
-
好吧，我无法将鼠标悬停在图表上以查看确切的值，但看起来它几乎翻了一番。我并不是说 300MB 的内存使用变化应该会导致性能问题，但对我来说，这表明正在发生的事情会导致内存使用量的增加。此外，您是否考虑过在 componentWillReceiveProps 之前和之后的生命周期中添加性能 console.log 检查？
-
啊，对不起，我在 componentWillReceiveProps 之前查看过，但我明白你在说什么，在 componentWillReceiveProps 完成之后，堆确实跳了很多。这很奇怪，因为 componentWillReceiveProps 中的代码非常简单，我根本看不到它会如何分配任何内存（它所做的只是检查其中一个道具的长度是否发生了变化并设置了一个简单的状态属性...）。无论如何，我想我会继续挖掘。
-
是的，没有看到 componentWillReceiveProps 中的代码，我想我不能提供任何其他建议。我假设您熟悉有关此生命周期钩子的警告，但如果您不熟悉此处的文档 (reactjs.org/docs/…)，并可能从您的代码中重构它，看看是否能解决您的问题。
标签： reactjs performance google-chrome profiling ag-grid-react