使用 JavaScript 检测 React

Question

作为一名库作者，我想知道我的库是否与 React 或其他一些 UI 框架（Vue、Svelte 等）一起使用。

有没有办法检测React的代码是否被加载？

以下 Stack Overflow 答案没有回答这个问题，因为它们只能使用开发者控制台。（而我想从 JavaScript 库的角度来检测 React。）

上下文：我正在构建vite-plugin-ssr。（它类似于 Next.js/Nuxt，但作为一个只做一件事、做好它的 Vite 插件。）

编辑：在 React渲染/水化页面之前，我需要能够在浏览器中加载 React 后立即检测到 React。到目前为止，下面的所有答案都发现 React 为时已晚。

Answer 1

我想出了以下解决方案：

const isReactApp = !!Array.from(document.body.querySelectorAll("*")).find((node) => node._reactRootContainer)

它适用于 create-react-app 以及 gatsby 项目（可能更多，因为到目前为止我只测试了这些项目）。

基本上它会遍历所有元素并检查reactRootContainer元素上是否定义了 magic 属性。考虑到该代码片段在具有大量 DOM 节点的大页面上可能会非常慢。

但是，我通常建议不要使用这种方法，因为该reactRootContainer财产很可能在不久的将来发生变化（因为它是私有的）。

更好的方法是让使用你的库的开发人员告诉你的库他们正在使用 React （或 vue 或 svelte 或 x）。

就像是：

import MyLibrary from '@mylibrary/react';

编辑：我发现的另一种方法可以适用于大多数反应项目，只要它们附加任何事件处理程序：

// find the reactEvents${....} variable in the document.
!!Object.keys(document).find(key => key.includes('react'))