如何检查反应组件何时被渲染或重新渲染
How to check when the react components get rendered or rerendered
有什么方法可以获取在执行任何 event/action 时渲染或重新渲染所有 React 组件的日志。我只想检查是否有任何不需要的 React 组件被重新渲染。我知道我们可以通过在渲染函数、componentWillReceiveProps 或 componentWillUpdate 中添加控制台来实现这一点。但是我的 webapp 中有很多组件。在每个组件中添加控制台语句将是一团糟。有没有更好的方法？
一个不错的选择是在 chrome 时间轴中可视化 React 组件。这让您可以看到哪些组件准确地被安装、更新和卸载，以及它们相对于彼此花费了多少时间。该功能是作为 React 15.4.0 版本的一部分添加的。您可以查看 official blogpost 以获得更好的见解，但总而言之，这些是获得它的步骤 运行:
在查询字符串中使用 ?react_perf 加载您的应用（例如，http://localhost:3000/?react_perf）。
打开 Chrome DevTools Timeline 选项卡并按 Record。
执行您要分析的操作。录制时间不要超过 20 秒，否则 Chrome 可能会挂起。
停止录制。
React 事件将分组在用户计时标签下。
之后，您将获得不同组件随时间的安装、更新和卸载的酷炫视觉表示
除了rauliyohmc 回答。他描述的分析工具非常有用和强大，但如果您的任务只是检查是否有不必要的重新渲染（即没有导致 DOM 更改的重新渲染），您可以使用简单易用的 react-addons-perf工具。它有 printWasted 方法，可以为您提供有关浪费的重新渲染的信息。
有什么方法可以获取在执行任何 event/action 时渲染或重新渲染所有 React 组件的日志。我只想检查是否有任何不需要的 React 组件被重新渲染。我知道我们可以通过在渲染函数、componentWillReceiveProps 或 componentWillUpdate 中添加控制台来实现这一点。但是我的 webapp 中有很多组件。在每个组件中添加控制台语句将是一团糟。有没有更好的方法？
一个不错的选择是在 chrome 时间轴中可视化 React 组件。这让您可以看到哪些组件准确地被安装、更新和卸载，以及它们相对于彼此花费了多少时间。该功能是作为 React 15.4.0 版本的一部分添加的。您可以查看 official blogpost 以获得更好的见解，但总而言之，这些是获得它的步骤 运行:
在查询字符串中使用 ?react_perf 加载您的应用（例如，http://localhost:3000/?react_perf）。
打开 Chrome DevTools Timeline 选项卡并按 Record。
执行您要分析的操作。录制时间不要超过 20 秒，否则 Chrome 可能会挂起。
停止录制。
React 事件将分组在用户计时标签下。
之后，您将获得不同组件随时间的安装、更新和卸载的酷炫视觉表示
除了rauliyohmc 回答。他描述的分析工具非常有用和强大，但如果您的任务只是检查是否有不必要的重新渲染（即没有导致 DOM 更改的重新渲染），您可以使用简单易用的 react-addons-perf工具。它有 printWasted 方法，可以为您提供有关浪费的重新渲染的信息。