js如何判断react页面
判断 React 页面的方法
检查全局变量或对象
React 页面通常会暴露 React 或 ReactDOM 全局变量。可以通过以下代码检测：
if (typeof React !== 'undefined' || typeof ReactDOM !== 'undefined') {
console.log('This is a React page');
}检查根 DOM 元素
React 应用通常会将组件挂载到特定 DOM 元素上，常见 id 为 root 或 app：
const rootElement = document.getElementById('root') || document.getElementById('app');
if (rootElement && rootElement._reactRootContainer) {
console.log('React component mounted');
}检查数据属性
React 组件可能在 DOM 元素上添加特殊属性，如 data-reactroot：
const elements = document.querySelectorAll('[data-reactroot]');
if (elements.length > 0) {
console.log('React detected via data attributes');
}检查开发者工具
在浏览器开发者工具的 Console 中，输入 __REACT_DEVTOOLS_GLOBAL_HOOK__，如果返回对象则说明页面使用了 React 且开发者工具扩展已安装。
检测组件名称
React 组件在开发者工具中会显示为特殊格式，可以通过遍历 DOM 元素检测：
Array.from(document.querySelectorAll('*')).some(element => {
const key = Object.keys(element).find(key => key.startsWith('__reactInternalInstance'));
return key && element[key];
});检查构建工具特征
React 项目通常使用 webpack 等构建工具，会留下特定注释：
Array.from(document.scripts).some(script =>
script.textContent.includes('webpackJsonp') ||
script.src.includes('main.chunk.js')
);使用浏览器扩展
安装 React Developer Tools 浏览器扩展，它会自动检测页面是否使用 React 并在工具栏显示图标状态。
