我知道有像Wappalyzer& amp;BuiltWith这样的工具，可以为您提供有关网站中使用哪个框架或库的信息。但是我需要一些关于ReactJs是否真的在网站中使用的证明。
经过一番研究，我发现像typeof React或window.React.version这样的命令，但这些命令并不总是有效。
关于如何检查reactJs是否使用了 Web 应用程序的任何想法？
40
尝试的代码片段，感谢 rambabusaravanan 列出的每个站点的示例。请参阅的链接
if(!!window.React ||
!!document.querySelector('[data-reactroot], [data-reactid]'))
console.log('React.js');
if(!!window.angular ||
!!document.querySelector('.ng-binding, [ng-app], [data-ng-app], [ng-controller], [data-ng-controller], [ng-repeat], [data-ng-repeat]') ||
!!document.querySelector('script[src*="angular.js"], script[src*="angular.min.js"]'))
console.log('Angular.js');
if(!!window.Backbone) console.log('Backbone.js');
if(!!window.Ember) console.log('Ember.js');
if(!!window.Vue) console.log('Vue.js');
if(!!window.Meteor) console.log('Meteor.js');
if(!!window.Zepto) console.log('Zepto.js');
if(!!window.jQuery) console.log('jQuery.js');
您可以在这里找到更多信息link
11
我有同样的问题，在我的情况下，我发现最好依靠React Developer Tools。
您可以将其安装在 Google Chrome 中，访问要检查的网站，然后打开 Chrome DevTools。
如果网站使用 React，则 React 开发人员工具将在 Chrome DevTools 中包含两个选项卡：
否则，React Developer Tools 将不包含以下选项卡：
3
Chrome 中有一个名为“React Developer Tools”的扩展，它允许您检查 Chrome Developer Tools 中的 React 组件层次结构
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi还有另一个名为 'React-detector' 的扩展:)
https://chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh
2
如果网站使用通过专用脚本 HTML 元素进行反应，则涉及检查全局变量（如globalThis.React）的其他答案将正常工作，但否则将面临这样的问题，即像 webpack 这样的程序可以将依赖代码包装在立即调用的函数表达式或其他机制中，以封装其详细信息并防止它们不必要地渗入全局范围。
可以尝试通过测试 DOM 元素是否具有在 React 上下文中设置的属性来解决此问题，例如_reactRootContainer。像这样：
Array.from(document.querySelectorAll('*'))
.some(e => e._reactRootContainer !== undefined)
一个页面可以有大量的元素,所以可以尝试基于一个假设进行优化,即 React 代码将调用ReactDOM.createRoot,并通过 HTML id 向其传递一个查询的元素。即,而不是检查所有的 DOM 元素,只检查那些有一个 id 属性。像这样:
Array.from(document.querySelectorAll('[id]'))
.some(e => e._reactRootContainer !== undefined)
请注意，id 过滤优化并不总是有效，因为 id 假设并不总是成立。
重要：由于此方法依赖于已创建的 react DOM，因此应注意在认为已创建 react DOM 之前不要应用它。可以尝试在脚本上应用 defer 属性等技术，或使用document.onload或setTimeout或它们的组合。
请注意，从查询中包装节点列表以将其转换为数组可能是次优的性能，但我觉得尝试优化它可能是微观优化。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（33条）