如何检查反应组件何时被渲染或重新渲染

Question

是否有任何方法可以获取在执行任何事件/操作时呈现或重新呈现所有React组件的日志。我只是想检查是否有任何不需要的React组件被重新渲染。我知道我们可以通过在render函数，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. React事件将在User Timing标签下分组。

之后，您将获得一个很酷的直观表示，可以随着时间的推移安装，更新和卸载不同的组件

Answer 2

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