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

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. React 事件将在 User Timing 标签下分组。

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

Answer 2

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