js如何判断react页面

判断 React 页面的方法

在 JavaScript 中，可以通过多种方式判断当前页面是否使用 React 框架开发。以下是几种常见的方法：

检查全局变量 React 通常会在全局对象（window）上暴露 React 或 ReactDOM 变量。可以通过检查这些变量是否存在来判断页面是否使用 React。

if (window.React || window.ReactDOM) {
  console.log('This page uses React');
}

检查 DOM 元素属性 React 会在渲染的 DOM 元素上添加 __reactFiber 或 __reactProps 等内部属性。可以通过检查这些属性来判断页面是否使用 React。

const rootElement = document.getElementById('root');
if (rootElement && rootElement.__reactFiber) {
  console.log('This page uses React');
}

检查 React 开发者工具 如果页面加载了 React 开发者工具扩展，可以通过检查 __REACT_DEVTOOLS_GLOBAL_HOOK__ 全局变量来判断。

if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
  console.log('This page uses React');
}

检查 script 标签 可以通过检查页面中的 script 标签是否包含 React 相关的资源链接来判断。

const scripts = document.getElementsByTagName('script');
const isReact = Array.from(scripts).some(script => 
  script.src.includes('react') || script.src.includes('React')
);
if (isReact) {
  console.log('This page uses React');
}

使用特征检测 React 组件通常具有特定的模式，可以通过检测这些模式来判断。例如，检查组件是否具有 _reactInternals 属性。

function isReactComponent(component) {
  return component && component._reactInternals !== undefined;
}

这些方法可以单独使用，也可以组合使用以提高判断的准确性。需要注意的是，某些方法可能受到浏览器扩展或页面优化措施的影响。