是否有任何方法可以获取执行任何事件/操作时所有 React 组件渲染或重新渲染的日志。我只是想检查是否有任何不需要的 React 组件被重新渲染。我知道我们可以通过在渲染函数、componentWillReceiveProps 或 componentWillUpdate 中添加控制台来实现这一点。但我的网络应用程序中有很多组件。在每个组件中添加控制台语句会很困惑。有更好的办法吗?
最佳答案
一个不错的选择是在 Chrome 时间轴中可视化 React 组件。这使您可以查看哪些组件被准确安装、更新和卸载,以及它们相对于彼此花费了多少时间。该功能是作为 React 15.4.0 版本的一部分添加的。你可以看看official blogpost为了获得更好的洞察力,但总而言之,这些是启动和运行它的步骤:
在查询字符串中使用 ?react_perf 加载您的应用(例如 http://localhost:3000/?react_perf )。
打开 Chrome DevTools 时间线选项卡并按“录制”。
执行您想要分析的操作。录制时间不要超过 20 秒,否则 Chrome 可能会挂起。
停止录制。
React 事件将分组在“用户计时”标签下。
之后,您将获得随时间推移安装、更新和卸载不同组件的炫酷视觉呈现
关于reactjs - 如何检查 react 组件何时渲染或重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43369357/