React Monitor

ReactMonitor 快速可视化 React 组件树的性能，帮助了解项目和调试。 它能做什么？ 通过使用…… ReactMonitor 快速可视化 React 组件树的性能，帮助了解项目和调试。 它能做什么？ 使用 ReactMonitor Chrome 开发者工具，无论是新手还是经验丰富的开发者，都可以直观地查看正在处理的现有代码库。该工具使用 React 构建，会在后台动态遍历 fiber 根对象，显示页面上组件的状态、属性、渲染时间和类型。 如何安装和运行？ 按照以下步骤在自己的代码库中运行 NPM 包。 - 安装包（npm install reactmonitorfiber） - 引入或导入包（import reactMonitor from 'reactmonitorfiber'） - 调用 React Monitor，传入用于渲染 React 元素的 DOM 元素 const container = document.querySelector('#root'); reactDOM.render(, container); reactMonitor(container); - 前往要运行 React Monitor 的 React 应用所在域名 - 打开 Chrome 开发者工具并选择 React Monitor 现在你可以实时查看应用中的状态变化了！