如何检查响应组件何时呈现或重新呈现

Question

有什么办法可以获取所有React组件在执行任何事件/操作时呈现或重新呈现的日志。我只想检查是否有任何不需要的React组件正在重新渲染。我知道我们可以通过在渲染函数，componentWillReceiveProps或componentWillUpdate中添加控制台来实现此目的。但是我的webapp中有很多组件。在每个组件中添加控制台语句将是一团糟。有没有更好的办法？

Answer 1

一个不错的选择是在chrome时间线中可视化React组件。这可以让您查看哪些组件正确安装，更新和卸载以及它们相对于彼此花费多少时间。该功能是作为React 15.4.0发行版的一部分添加的。你可以看看的official blogpost以获得更好的洞察力，但总结起来，这些都是得到它的步骤，并运行：

1. 与查询字符串react_perf加载您的应用程序（例如， http://localhost:3000/?react_perf）。

2. 打开Chrome DevTools时间轴选项卡，然后按录制。

3. 执行您想要进行配置文件的操作。记录时间不要超过20秒，否则Chrome可能会挂起。

4. 停止录音。

5. 反应事件将被分组在User Timing标签下。

之后，你会得到安装，更新和您的不同组件卸载的清凉视觉表现随着时间的推移

Answer 2

除了rauliyohmc答案。他描述的剖析工具是非常有用且功能强大的，但如果您的任务只是检查是否存在不必要的重新渲染（即不会导致DOM更改的渲染工具），则可以使用漂亮而简单的react-addons-perf工具。它有printWasted方法，它将为您提供有关浪费重新渲染的信息。