我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

学习一项技术的最好办法,就是学习别人的例子。react也是这样,那么如何找到其它的react网站呢?react-devtools其实具有检测网站的功能。同时,它还能检测当前的页面,使用的react是生产版本,还是调试版本(两者在性能上区别还是很大的)。这款神奇的react-devtools,您安装好了么?

苏南大叔:如何判断网页是否使用了 react 技术?react 模块检测 - react-detect
如何判断网页是否使用了 react 技术?react 模块检测(图4-1)

本文的测试环境是:react-devtools@3.4.2,特约嘉宾是create-react-app的默认项目。

安装react-devtools

这个内容,为了获得这款react-devtools扩展,苏南大叔已经反反复复讲了好多种方案了。

下面是相关链接:

总之,条条大路通罗马,这里假设,您已经获得了react-devtools扩展。安装好之后,不但在f12里面有新的选项卡。同时,在谷歌浏览器的右上角也有新的react图标。这个图标正是本文主要讲述的内容。

判断标准:图标变换

谷歌浏览器的react扩展,在右上角安装了扩展图标。这个扩展图标,具体检测当前页面是否包含react技术的功能。当然,会有误报,对于file://开头的页面,可能会检测不到使用了react技术,这个应该是个bug

下面的截图,都基于create-react-app的默认项目。大家可以对比看看效果即可。

使用了调试版的react

苏南大叔:如何判断网页是否使用了 react 技术?react 模块检测 - 检测1
如何判断网页是否使用了 react 技术?react 模块检测(图4-2)

当然在正式的生产环境中,是不推荐使用调试版的react的。所以,出现这个图标的时候,可能就需要注意修改react的版本了。

使用了生产版的react

苏南大叔:如何判断网页是否使用了 react 技术?react 模块检测 - 检测2
如何判断网页是否使用了 react 技术?react 模块检测(图4-3)

显示这个图标的话,就证明使用了推荐使用的生产环境下的react类库。

没有检测到react

苏南大叔:如何判断网页是否使用了 react 技术?react 模块检测 - 检测3
如何判断网页是否使用了 react 技术?react 模块检测(图4-4)

没检测到react的话,就显示这个图标。不过如果您是file协议的话,这里可能存在着一个bug。就是说,如果是file协议,这里的检测说没使用react,这个可能是个误报。但是如果是正式的http或者https协议,这里说没有使用react的话,那就肯定是没用使用react。听领导的话,有饭吃。

总结

这个react-devtools还是非常非常有用的,这里大家如果想学好react技术的话,苏南大叔建议您:一定要安装这款浏览器扩展。更多react相关文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react