如何从 chrome 扩展工具检查 <Suspense> 组件？

【问题标题】：How to check for <Suspense> components from a chrome extension tool?如何从 chrome 扩展工具检查 <Suspense> 组件？
【发布时间】：2021-01-17 12:02:12
【问题描述】：

我正在开发一种 chrome 扩展形式的工具，该工具检查包裹在 Suspense 组件中的组件的计时指标，以检查它们的暂停时间。这是我所指的示例。

<Suspense placeholder={<h1>Loading...</h1>}>
  <Component />
</Suspense>

但是，我在检查特定组件名称时遇到了问题。想知道是否有人可以提出检索组件名称的方法或方法。

【问题讨论】：

标签： reactjs react-suspense

【解决方案1】：

在 Reacts 纤程树中挖掘了一段时间后发现（通过控制台在浏览器中记录 document.getElementById('root')._reactRootContainer._internalRoot.current，同时确保您的根名为“root”），您可以通过标签区分 Suspense 组件。最终把我带到了这个链接： https://github.com/facebook/react/blob/cbbc2b6c4d0d8519145560bd8183ecde55168b12/packages/shared/ReactWorkTags.js#L34

我能够通过搜索标签 === 13 来 console.log Suspense 组件。

【讨论】：