如何判断在浏览器中运行时运行的React版本？

Question

有没有办法在浏览器中了解React的运行时版本？

Answer 1

React.version 是你在找什么.

它虽然没有记载(据我所知),所以它可能不是一个稳定的特征(即虽然不太可能,但它可能在将来的版本中消失或改变).

React导入为脚本的示例

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

React导入为模块的示例

import React from 'react';

console.log(React.version);

显然,如果您React作为模块导入,它将不在全局范围内.上面的代码旨在与您的应用程序的其余部分捆绑在一起,例如使用webpack.如果在浏览器的控制台中使用它几乎不会工作.

第二种方法是推荐的方法.大多数网站都会使用它.create-react-app执行此操作(它使用场景后面的webpack).在这种情况下,React封装并且通常在捆绑之外根本不可访问(例如,在浏览器的控制台中).

Answer 2

从命令行：

npm view react version
npm view react-native version

Answer 3

安装 React Devtools 后，您可以从浏览器控制台运行它：

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

输出类似于：

react-dom: 16.12.0

Answer 4

如果启用了 React DevTools 扩展，则可以在控制台中执行以下命令： window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

这是我在生产中的网站上执行它的输出（nikolovlazar.com）

Answer 5

打开Chrome Dev Tools或同等产品,然后require('React').version在控制台中运行.

这适用于像Facebook这样的网站,也可以找出他们正在使用的版本.

Answer 6

不确定是否已导出任何全局ECMAScript变量,并且html/css不一定表示React.所以看看.js.

方法1:查看ECMAScript:

版本号由两个模块react-dom和react导出,但这些名称通常通过捆绑删除,并且版本隐藏在无法访问的执行上下文中.一个聪明的断点可以直接显示该值,或者您可以搜索ECMAScript:

1. 加载网页(您可以尝试https://www.instagram.com他们是完整的Coolaiders)
2. 在"源"选项卡上打开Chrome开发者工具(控制+ shift + i或命令+ shift + i)
   1. Devs工具在Sources选项卡上打开
3. 在顶部菜单栏的右侧,单击垂直省略号并选择搜索所有文件
4. 在左侧的搜索框中键入FIRED大写字母,清除复选框Ignore case,键入Enter
   1. 下面会显示一个或多个匹配项.该版本是一个非常接近搜索字符串的导出,看起来像版本:"16.0.0"
5. 如果版本号不是立即可见的:双击以行号开头的行
   1. ECMAScript出现在中间窗格中
6. 如果版本号不是立即可见的:单击ECMAScript窗格左下角的两个大括号{}
   1. ECMAScript重新格式化,更易于阅读
7. 如果版本号不能立即显示:向上和向下滚动几行以查找它或尝试其他搜索键
   1. 如果代码没有缩小,搜索ReactVersion 应该有2次具有相同值的命中
   2. 如果代码缩小,请搜索SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED或react-dom
   3. 或者搜索可能的版本字符串本身:"15 ."或"16.甚至"0.15

方法2:使用DOM断点:

1. 加载React呈现的页面
2. 右键单击React元素(任何内容,如输入字段或框)并选择 Inspect Element
   1. Chrome开发者工具会显示该Elements窗格
3. 从所选元素中尽可能高在树中,但不高于React根元素(通常是具有id root的主体内部的div:<div id ="root">),右键单击元素并选择Break On… - subtree modifications
   1. 注意:可以将"元素"选项卡(DOM当前状态)的内容与"网络"选项卡上相同资源的响应进行比较.这可能会揭示React的根元素
4. 单击地址栏左侧的"重新加载"重新加载页面
   1. Chrome开发者工具在断点处停止并显示该Sources窗格
5. 在最右侧的窗格中,检查Call Stack子窗格
6. 在尽可能远的调用堆栈中,应该有一个render条目,这是ReactDOM.render
7. 点击下面的一行render,即.调用render的代码
8. 中间的面板现在显示的ECMAScript与含有表达.render突出
9. 将鼠标光标悬停在用于调用渲染的对象上,是.该react-dom模块的出口对象
   1. 如果代码行:Object(u.render)(...,将鼠标悬停在u上
10. 显示工具提示窗口,包含version: "15.6.2",即.导出的所有值react-dom

该版本也注入到React dev工具中,但据我所知,在任何地方都没有显示.

Answer 7

您可以在终端上运行以下命令，具体取决于您使用的是npm还是yarn：

npm view react version
or
yarn view react version 

或者您也可以在项目中的“依赖项”下打开 package.json 文件，选中“react”：分号后面将是您的 React 版本

Answer 8

打开控制台，然后运行window.React.version.

这在 Safari 和 Chrome 中对我有用，同时从 0.12.2 升级到 16.2.0。

Answer 9

如果未安装，请先安装 React 开发工具，然后在浏览器控制台中使用以下代码运行：

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

Answer 10

对于使用create-react-app创建的应用程序，我设法查看了版本：

1. 打开 Chrome 开发工具/Firefox 开发工具，
2. 搜索并打开 main.XXXXXXXX.js 文件，其中 XXXXXXXX 是构建哈希/可能不同，
3. 可选：通过单击 {} 来显示格式化源来格式化源，
4. 在react-dom的源代码中搜索文本，
5. 在Chrome中发现：“react-dom”：“^16.4.0”，
6. 在 Firefox 中发现： 'react-dom': '^16.4.0'

该应用程序是在没有源映射的情况下部署的。

Answer 11

在现有项目中，查看 React 版本的一种简单方法是转到render任何组件的方法并添加：

<p>{React.version}</p>

这假设您像这样导入 React： import React from 'react'