使用 React 开发者工具调试组件
介绍
使用断点、逐步执行和记录到控制台等方法调试 React 应用是完全可行的，但有时这可能是一个困难的过程——尤其是在调试您以前从未见过的应用程序时。幸运的是，通过安装 React 开发人员工具，可以克服其中一些困难。本指南将向您展示如何使用 React 开发人员工具的“组件”选项卡来帮助导航和调试不熟悉的代码库。
本指南将基于 React Web 应用程序；但是，开发人员工具也可以与 React Native 应用程序一起使用。示例中使用的应用程序在此处。
安装
首先要做的是安装开发者工具。具体安装方法取决于您用来运行应用程序的浏览器。对于 Chrome 和 Firefox，开发者工具以浏览器扩展程序的形式提供，可在相应的扩展程序商店中找到。如果使用其他浏览器，可以从此npm 包中将开发者工具作为独立应用程序安装。
安装后，无论是在独立应用程序还是浏览器开发者工具中，都会有两个新选项卡可用：组件和分析器。本指南将使用“组件”选项卡。
组件选项卡
查看您从未见过的 React 应用程序时，最大的问题之一是，在哪里可以找到您在浏览器中看到的代码。React 应用程序通常会使用组件组合等技术，因此会包含许多小组件，因此识别哪个组件在浏览器中呈现什么内容可能很棘手。这时，开发人员工具的“组件”选项卡就非常有用了。
查找组件
当你打开组件选项卡时，在左侧面板中你将看到 React 组件树：
将鼠标悬停在组件上，其呈现的 HTML 将在浏览器中突出显示。
一旦确定了要详细查看的 React 组件，就可以在树中选择它，然后在右侧面板中找到渲染它的文件和代码行。因此，在示例应用程序中，如果选择树中的第一个Container组件，您将看到以下内容：
如果你转到Selectors.jsx的第 24 行，它看起来像这样：
<Container>
...
</Container>
有时你可能会在树中看到名为Anonymous 的组件。这通常是由于开发人员使用以下语法将组件导出为未命名的默认组件所致：
export default () => {...};
export default function() {...}
export default class extends Component {...}
上述所有技术仍可用于查找组件的代码，只是没有名称。为了确保您的组件在树中被命名，请将上述语法替换为：
const AComponent = () => {...}
export default AComponent;
export default function AComponent() {...}
export default class AComponent extends Component {...}
const WithChangedCount = props => {...};
WithChangedCount.displayName = `withChangedCount(${Component.name})`;
return WithChangedCount;
过滤和搜索
您还可以通过在搜索框中输入正则表达式来按名称搜索组件，如下所示：
组件状态和属性
在树中选择一个组件后，其当前状态和属性将显示在右侧面板中。作为开发人员，这允许您在调试应用程序时随时检查组件的状态和属性是否符合您的预期。
除了检查状态和属性之外，还可以更改它们，这非常有用，因为它可以简单地检查某些 UI 在不同情况下的外观，并调试组件如何根据其当前状态/属性进行交互。例如，在示例应用中，您可以选择树中的NumberSelector组件之一，并在其属性中添加一个isSelected属性，如下所示：
添加此 prop 后，将选中该组件的复选框。请注意，它只会选中复选框，而不会调用onSelectChanged回调，因为您正在更改 prop，而不是通过 UI 选中复选框。
您还可以更改AppContextProvider组件中的状态挂钩，该挂钩控制累计总数：
这将更新浏览器中显示的总数，并且该总数的任何后续更改都将基于此新状态。
组件渲染
使用 React 开发人员工具，还可以查看哪些组件负责渲染所选组件。通常可以通过查看组件树来查看，但情况并非总是如此。
要查看示例应用程序中哪些组件渲染了NumberSelector组件之一，您可以选择树中的组件，然后在右侧面板中您将看到：
这表明NumberSelector是由Selectors组件呈现的，而 Selectors 组件是由App组件呈现的。如果查看组件树，您会发现 NumberSelector是Container组件的子组件，但Container并不负责呈现它。这是因为应用程序是使用组件组合构建的，并且NumberSelector组件列表作为子组件从Selectors组件中传递给Container，如下所示：
return (
<Container>
{Object.entries(numberSelectors).map(([text, { value }]) => (
<NumberSelector
key={text}
text={text}
onSelectChanged={handleSelectChanged(text, value)}
/>
))}
</Container> );
您还可以通过双击树中的组件来查看此信息，这将使树更改为仅显示由所选组件渲染的组件。渲染它的组件将显示在顶部的栏中：
悬念
<Suspense fallback={<div>This is a suspense fallback</div>}>
...
</Suspense>
当点击暂停按钮时，将显示fallback prop 中指定的内容。
结论
本指南介绍了如何使用 React 开发人员工具来更轻松、更快速地浏览 React 应用程序并调试其中的组件。示例应用程序的代码可在此处找到。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~