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

Question

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

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 事件将被分组在用户计时标签下。

之后，您将获得随时间推移安装，更新和卸载不同组件的酷炫视觉表示

Answer 2

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