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

Question

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

Answer 1

一个不错的选择是可视化Chrome时间轴中的React组件.这使您可以查看哪些组件正确安装,更新和卸载,以及它们相对于彼此的时间.该功能是作为React 15.4.0发布的一部分添加的.您可以查看官方博客文章以获得更好的洞察力,但总结一下,这些是启动和运行的步骤:

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方法可以为您提供有关浪费的重新渲染的信息。