React Devtools 使用技巧

news2024/10/7 6:44:48

首先在扩展迷中搜索下载该扩展，引入到 Chrome 的扩展程序中。

当我们添加扩展到Chrome中，就会在浏览器中看到 React Devtools 的 Icon，同时通过该扩展我们就可以知道当前打开的网站是开发环境的网站还是生产环境，React Devtools Icon会根据不同的环境显示不同的 Icon。

如果想要在部署上线后，不想别人通过 Devtools 来查看你的网站信息，在打包环境下执行：

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {for (const [key, value] of (Object).entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value === 'function' ? () => undefined : null;}
}

默认情况下的React Devtools，在生产环境下，这些数据不能修改的，但是是可见的。

⚛️ Components和⚛️ Profiler 这两个就是 React Devtools 的功能入口。

Components 面板功能说明

在 Components 面板中，我们可以看到组件的结构以及相应的数据。

定位组件

当在项目中引入ReactRouter和Redux以及第三方框 UI 库等工具后，组件树会看起来有些多，我们一时难以找到对应的组件以及绑定的数据。如若想要定位到我们自己的组件，可在搜索框只搜索组件名，然后双击该组件，这时的组件树就会看起来简洁一些，只会展示出我们在代码中使用到的组件，并不会出现嵌套层级很深的组件。

过滤器

过滤器可以帮助我们轻松过滤到一些我们不想展示的组件，例如，过滤掉<Spin>组件。

调试组件

在调试面板中找到对应的组件双击，该组件对应的数据就会列在右侧，我们可以通过简单的修改右侧的数据，来观察页面的变化。

debug信息

每点击一次debug按钮，然后切换到console控制台我们就会发现在控制台输入了当前组件的相信信息。

Profiler 面板介绍

在 React 的官方文档中有介绍到Profiler API添加在 React 组件树中的任何地方来测量组件树中这部分渲染所带来的开销。

例如，我们来分析antd中<Table/>组件渲染的开销。

<div className="App"><h1>Hello React.js</h1><Profiler id="Navigation"onRender={(id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => {}}><Table dataSource={users} columns={columns}/></Profiler>
</div>

<Profiler id="Navigation"onRender={(id, // 发生提交的 Profiler 树的 “id”phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一actualDuration,// 本次更新 committed 花费的渲染时间baseDuration,// 估计不使用 memoization 的情况下渲染整棵子树需要的时间startTime, // 本次更新中 React 开始渲染的时间commitTime,// 本次更新中 React committed 的时间interactions // 属于本次更新的 interactions 的集合 ) => {}}> <Table dataSource={users} columns={columns}/>
</Profiler>