北塘网站制作如何在国外推广自己的网站
目录
- React Developer Tools
- 使用
- Components 功能特性
- 1. 查看和编辑 props/state/hooks
- 2. 查找组件
- 3. 检查组件树
- 4. 打印组件信息
- 5. 检查子组件
- Profiler 功能特性
- Commit Chart
- Flame Chart 火焰图
- Ranked Chart 排名图
- why-did-you-render
参考文档：
- React调试利器：React DevTools
- How to Use React Dev Tools – With Example Code and Videos
React Developer Tools
当你在开发一个 React 项目时，最简单的调试方式之一就是使用 React 开发者工具，React Developer Tools。
React Dev Tools 是由 React 团队开发的一款浏览器扩展，它允许开发者在浏览器的开发者工具中调试他们的代码。
使用
安装该扩展后，你会在开发者工具中看到两个新的标签页，分别是 Components（组件）和 Profiler（性能分析器）。
Components：
Profiler：
要使用该扩展的全部功能，你需要处于开发模式。这是因为在生产模式下，组件的名称会被替换为字母，这样你就无法对组件进行性能分析。
Components 功能特性
“Components” 标签页允许你在开发者工具中调试代码，并提供多种功能。让我们一一介绍这些功能：
1. 查看和编辑 props/state/hooks
可以帮助你查找组件，并在开发者工具中查看它对应的 props 和 state，而无需单独在控制台中打印它们。
你可以直接编辑组件的 props 或 state：这可以帮助你实时地查看变更效果，而无需重新加载或刷新网页。上面是一个示例视频，展示了它的使用方式。
2. 查找组件
你可以在整个应用中轻松搜索组件，只需在提供的搜索栏中输入组件名称。它会显示所有与关键词匹配的相关组件，之后你可以在匹配结果之间进行导航。
3. 检查组件树
在调试时，了解是哪些父组件导致子组件重新渲染是非常重要的。而直接在代码中查找这些信息有时会非常繁琐。React Dev Tools 中的 “rendered by”（渲染来源）部分能让这一过程变得更加简单，它会在一个地方列出所有相关的父组件。
4. 打印组件信息
如图示右侧，支持 Logging a component’s data in the console.
有些开发者喜欢在控制台中工作，而这个功能允许你只需点击一次，就能将组件的所有数据输出到控制台。它会展示该组件的所有相关信息，比如接收到的 props、使用的 hooks、在 DOM 中的节点位置，以及该组件在你本地系统中的文件路径。
5. 检查子组件
就像检查父组件在代码中并不总是容易一样，检查子组件也有类似的问题。
为了解决这个问题，你可以双击组件名称，这样就可以一次性查看目标组件内部的所有子组件，将以高亮的形式。
Profiler 功能特性
这个标签页允许你测试组件的性能，并显示哪些组件需要关注以进行优化。
要检查网页的性能，你只需按照以下步骤操作：
- 点击记录按钮。
- 使用你的网页，让性能分析器能够分析组件的渲染情况。
- 再次点击记录按钮以结束录制。
- 出现如下结果
如上所示，截图中标记了几个部分。让我们一一介绍它们：
- A 是记录按钮，它可以帮助你录制性能分析会话。
- B 是刷新按钮，它可以帮助你刷新页面以重新开始会话。
- C 是清除按钮，它可以帮助你清除性能分析会话的结果。
- D 是 Commit Chart，它会显示会话期间的 commits list。
- E 是组件列表，它会显示在会话期间渲染的组件。
- F 是 Flame Chart 火焰图按钮，它会像 E 一样显示组件列表。
- G 是 Ranked Chart 排名图按钮，它会按排名方式显示组件列表。如下图
现在让我们深入了解这个标签页中的不同功能，以及如何检查网页的性能。
Commit Chart
commit chart 显示了会话期间的提交列表。如上图所示，在 D 部分，有 33 根条形图。这些条形图代表会话中的 33 次提交。每次提交都会显示一个副作用，导致 DOM 更新。
你可以在这些条形图之间切换，分别查看每个提交的详情。
Flame Chart 火焰图
火焰图显示了在一次提交中渲染的组件列表。如上面图示，当你点击标记为 F 的部分时，E 部分中的所有横向条形图代表第一次提交中的不同组件。
火焰图可以分析哪些组件花费了更多的时间来渲染。请注意，火焰图还会显示：
- 组件渲染的确切时间。
- 组件在性能分析会话中渲染所花费的时间。
例如，在下图中，SpaceCard 组件在 1.5 秒时渲染，并且渲染时间为 6.1 毫秒。
Ranked Chart 排名图
当你点击 G 部分所示的排名图标时，你将看到一个组件的图表视图。这个视图是按降序排列的，也就是说，花费最多时间渲染的组件会位于顶部，而花费最少时间渲染的组件会位于底部。
注意：你可以通过在 “Profiler” 标签页的设置中启用 “Record why each component rendered while profiling” 复选框来获取更多关于为何组件渲染的信息。以下是附带的参考图片：
React Dev Tools 是一个非常棒的扩展，适用于你在开发 React 应用时使用。它们可以帮助你轻松调试代码，并找出应用中的性能瓶颈。
why-did-you-render
有时，组件会重新渲染，但无法立即查明原因。虽然 React DevTools 很有用，但在大型应用中，它可能只会提供模糊的解释，例如“hook #1 已渲染”，这可能是无用的。
在这种情况下，你可以求助于 why-did-you-render 库。