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

标签 reactjs react-redux

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

最佳答案

一个不错的选择是在 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 事件将分组在“用户计时”标签下。

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

关于reactjs - 如何检查 react 组件何时渲染或重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43369357/

相关文章:

reactjs - React Material UI - 如何根据另一个值自动从自动完成中删除项目

reactjs - react - 错误 : Invariant failed: You should not use <Link> outside a <Router>

javascript - 哪种方式最适合 React Native 中的条件渲染?

javascript - 在 React Table 7.1.0 中一次只能选择一行

javascript - 当子组件调用方法时,父引用为 null - ReactJS

reactjs - React Redux Firebase 中的私有(private)路由不起作用

javascript - 在 React JS 中获取多数组中的 JSON 数据时出错?

reactjs - React 组件中的排序

javascript - Redux - 将项目添加到数组时连接新状态时出现问题

css - 如何在 react-native-router-flux 中设置 Scene 组件的标题