你不知道的React Developer Tools，20 分钟带你掌握 9 个 React 组件调试技巧
<div align="center"><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211944448-1665836222.jpg"></div><h1 id="壹--引">壹 ❀ 引</h1>
<p><code>React Developer Tools</code> 是 <code>React</code> 官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，<code>props</code> 排查等等场景都扮演者至关重要的角色；毋庸置疑，熟练使用<code>React Developer Tools</code> 能让你的日常开发更加高效。</p>
<p>而我对于目前前端团队同学做了随机调查，询问了大家对于 <code>React Developer Tools</code> 的使用情况，以及如何定位某个组件在哪个文件被创建，某个组件又是在哪个文件被使用的习惯，了解到的情况是部分同学没使用<code>React Developer Tools</code> 全凭经验搜索，或者有使用但不多，日常还是会根据组件类名在项目中进行全局搜索。这样做当然也可以，但依旧会有如下几个问题：</p>
<ul>
<li>
<p>需要研发同学对于项目结构以及大部分组件足够清晰，这对于新入职的同学是一个挑战。</p>
</li>
<li>
<p>某个方法名或者类名在项目中并不唯一（比如 <code>handleClick</code> 随处可见），这加大了定位的难度。</p>
</li>
<li>
<p>未来组件库将采用<code>css in js</code> 模式，类名随机生成让类名定位的方式不再可能。</p>
</li>
</ul>
<p>关爱团队成长，分享 <code>React Developer Tools</code> 非常有必要，于是就有了这篇文章。这篇文章带大家系统性了解<code>React Developer Tools</code> 这款插件，通过本文你将学会：</p>
<ul>
<li>挂起组件模拟组件加载缓慢场景</li>
<li>快速定位组件所对应的真实 <code>dom</code>。</li>
<li>快速定位组件 <code>props</code> 中某个函数在何处创建。</li>
<li>无需改代码， <code>props</code> 在线交互感知组件变化。</li>
<li>2 种方式快速定位组件在哪个文件被创建。</li>
<li>3 种方式定位组件在哪个文件被使用（精确到行）。</li>
<li>过滤无意义组件层让组件结构更清晰</li>
<li>了解组件无效渲染严重层度</li>
</ul>
<p>当然，你应该先去<code>chrome</code> 商店安装这款浏览器插件，注意，它只会对 <code>React</code> 所写的页面生效，在刷新页面后，你会发现控制台多出了<code>Components</code> 与 <code>Profiles</code> 两个选项，本文着重介绍 <code>Components</code> ，关于 <code>Profiles</code> 将在性能篇单独探讨。</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211636305-500578846.png" alt="" loading="lazy"></p>
<h1 id="贰--你应该知道的-react-developer-tools">贰 ❀ 你应该知道的 React Developer Tools</h1>
<h3 id="贰--壹-挂起组件模拟组件加载缓慢场景">贰 ❀ 壹 挂起组件模拟组件加载缓慢场景</h3>
<p>我们常常用 <code>React.lazy</code> 来懒加载组件，以避免组件未使用而被提前加载。但如果使用 <code>React.lazy</code> 我们还得结合 <code>React.Suspense</code> 来处理当组件还未准备好的兜底场景，所以你常常看到类似如下的代码：</p>
<pre><code class="language-javascript">const Button = React.lazy(() => import("./Button"));
// 当 Button 组件为准备好，我们展示 Loading...
<React.Suspense fallback="Loading...">
<Button />
</React.Suspense>
</code></pre>
<p>而事实上当 <code>Button</code> 组件加载过快，你根本无法感知 <code>Loading</code> 效果，那假设我现在要调试 <code>Loading</code> （它可能是一个其它组件）是否正常怎么办呢？这时候我们就能使用手动挂起组件，先点击你要挂起的组件，再点击对应的图标，如下图：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211646581-373740902.gif" alt="" loading="lazy"></p>
<h3 id="贰--贰-快速定位组件对应的真实dom">贰 ❀ 贰 快速定位组件对应的真实DOM</h3>
<p>日常开发中我们常常会遇到要修改组件样式的问题，那么如何找到组件所对应的真实 <code>DOM</code> 呢？查找类名是一种办法，其实还有更简单的办法，操作如下:</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211655927-571663242.gif" alt="" loading="lazy"></p>
<p>当然，也许它定位的仍然不是你所希望的具体节点，但起码它能帮你将 <code>DOM</code> 的节点范围进一步缩小，让你更快找到你希望看到的节点。</p>
<h3 id="贰--叁-定位组件-props-中某个函数在何处创建">贰 ❀ 叁 定位组件 <code>props</code> 中某个函数在何处创建。</h3>
<p>我们常常会遇到需要查找某个组件 <code>props</code> 中某个方法是在哪定义的，它可能是从隔了五六层的组件所传递，假设这个方法名像 <code>handleClick</code>这么常见，搜索也非常麻烦，我们可以通过 <code>< > Go to definition</code> 快速知晓：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211716339-2039735490.gif" alt="" loading="lazy"></p>
<p>这样你就知道这个方法是在哪个文件所创建，复制文件的路径去编辑器搜一下马上就可以定位到了。是不是比搜方法名要快得多呢？</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211724298-1689486125.gif" alt="" loading="lazy"></p>
<h3 id="贰--肆-props-在线交互">贰 ❀ 肆 <code>props</code> 在线交互</h3>
<p>我们常常遇到某个组件的 <code>props</code> 传递没达到预期的情况，你需要排查某个属性是否达到了你想要的效果，这个时候在线修改 <code>props</code> 比你去改代码然后触发构建要快得多，比如我直接修改 <code>Button</code> 的 <code>type </code>类型，然后你发现按钮背景色变了。</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211732900-191232109.gif" alt="" loading="lazy"></p>
<p>类似的场景非常多，比如我们需要看遮罩层显示隐藏，让 <code>list</code> 下拉默认展示出来等等，我们都能通过此方法达到效果。</p>
<p>除了直接修改 <code>props</code>，我们还能把 <code>props</code> 保存到控制台操作，比如有时候我们没办法查看源码，但你又希望知晓某个方法的执行是否符合你的预期，这时候你能这么做：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211740431-1268114707.gif" alt="" loading="lazy"></p>
<p>比如上图我并未点击按钮，单纯通过控制台执行了 <code>setState</code> 让数字增1。</p>
<h3 id="贰--伍-2-种方式快速定位组件在哪个文件被创建">贰 ❀ 伍 2 种方式快速定位组件在哪个文件被创建。</h3>
<p>针对于找一个组件在哪，常见有两种场景：</p>
<ul>
<li>某个组件可能有 <code>bug</code>，因此我想知道这个组件在哪定义方便去修改。</li>
<li>某个页面的组件有<code>bug</code>，怀疑是 <code>props</code> 传递有问题，因此我想知道在这个组件在哪里被使用。</li>
</ul>
<p>我们先说怎么知道一个组件被定义在哪，方法 1 非常简单：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211748577-1184025658.gif" alt="" loading="lazy"></p>
<p>第二种办法稍微麻烦点，我们能在控制台直接输出组件完整的信息，其中就包含组件声明的文件路径，具体操作如下：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211757297-1397351733.gif" alt="" loading="lazy"></p>
<p>点击控制台输出组件信息的图标，点开 <code>nodes</code> ，点开<code>__reactFiber</code> 前缀，找到<code>_debugSource</code>即可。</p>
<h3 id="贰--陆-3-种方式快速定位组件在哪个文件被使用精确到行">贰 ❀ 陆 3 种方式快速定位组件在哪个文件被使用（精确到行）</h3>
<p>方式一，直接看 <code>source</code> 信息，它会直接告诉你在哪个文件的多少行：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211807096-1411752372.png" alt="" loading="lazy"></p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211816355-613121975.png" alt="" loading="lazy"></p>
<p>方式二，一键自动打开 <code>vscode</code> 并跳转到对应行数，先看效果：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211825051-511532934.gif" alt="" loading="lazy"></p>
<p>有同学就说了，我怎么没这个图标按钮，其实只需要一个简单的配置就好了，大家复制 <code>vscode://file/{path}:{line}</code> 到下图位置即可：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211838789-21953625.gif" alt="" loading="lazy"></p>
<p>注意，此配置因项目复杂度可能有失效的情况，目前我测试了 windows 以及 mac 双环境下 <code>create-react-app</code> 项目均能正常跳转，<code>mac</code> 用户请保证<code>vscode</code>安装目录在<code>application </code>下，而不是下载目录中，这能减少很多不必要的麻烦。</p>
<p>方式三，同样通过控制台输出组件信息，可以看到使用的文件以及行数都有输出，如下：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211848311-1000306934.gif" alt="" loading="lazy"></p>
<h3 id="贰--柒-过滤无意义组件层让组件结构更清晰">贰 ❀ 柒 过滤无意义组件层让组件结构更清晰</h3>
<p>事实上，组件开发因为<code>ref</code>以及<code>context</code>等等的嵌套，会让插件中的组件结构过于臃肿，而这些层级往往是你不需要关注的，因此你可以通过过滤配置来屏蔽一些无意义的层级，比如：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211856613-1251578754.gif" alt="" loading="lazy"></p>
<h3 id="贰--捌-了解组件无效渲染严重层度">贰 ❀ 捌 了解组件无效渲染严重层度</h3>
<p>虽然目前项目还未对组件无效渲染提出要求，不过我们还是能通过如下配置知晓每个组件的渲染情况，如下：</p>
<p><img src="https://img2022.cnblogs.com/blog/1213309/202211/1213309-20221106211903939-260796603.gif" alt="" loading="lazy"></p>
<p>当开启渲染高亮后，之后我们的每次操作，只要涉及到 <code>render</code> 的组件都会有一个颜色的框框标注出来，而渲染的维度涉及两个方面：</p>
<ul>
<li>颜色，只有绿色或者黄色，绿色表示渲染次数很少，颜色越偏黄说明渲染越多。</li>
<li>框框持续时间，如果高亮迟迟不消失，也说明渲无效渲染持续非常久。</li>
</ul>
<p>先了解这两点，至于如何排查无效渲染，我们另起一篇文章再说。</p>
<h1 id="叁--总">叁 ❀ 总</h1>
<p>那么到这里，我们基本介绍了 <code>React Developer Tools</code> 你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具<code>Profiler</code> 在性能优化篇我们再单独探讨，敬请期待。</p><br><br>
来源：https://www.cnblogs.com/echolun/p/16864130.html
頁:
[1]