如何分辨浏览器在运行时运行的版本？

有没有办法知道浏览器中React的运行时版本？

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是封装的，通常在捆绑包之外（例如，在浏览器的控制台中）根本无法访问。

从命令行：

npm view react version
npm view react-native version

打开Chrome Dev Tools或等效工具并require('React').version在控制台中运行。

该功能也可以在Facebook之类的网站上找到其使用的版本。

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

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

输出如下：

react-dom: 16.12.0

不确定是否已导出任何全局ECMAScript变量，并且html / css不一定表示React。因此，请查看.js。

方法1：在ECMAScript中查看：

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

1. 加载网页（您可以尝试https://www.instagram.com，它们完全是Coolaiders）
2. 在“来源”标签上打开Chrome开发者工具（Ctrl + Shift + i或Command + Shift + i）
   1. 在“源”选项卡上打开“开发”工具
3. 在顶部菜单栏的最右侧，单击垂直省略号，然后选择搜索所有文件
4. 在左侧的搜索框中，用大写字母键入FIRED，清除复选框忽略大小写，键入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 root元素（通常直接在主体内，且其ID为root：<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. 将鼠标光标悬停在用于调用渲染的对象is上。该react-dom模块的出口对象
   1. 如果代码行：Object（u.render）（…，将鼠标悬停在u上
10. 显示一个工具提示窗口，其中包含version: "15.6.2"。导出的所有值react-dom

该版本也被注入到React开发工具中，但据我所知没有显示在任何地方。

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

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

在index.js文件中，只需将App组件替换为“ React.version”。例如

ReactDOM.render(React.version, document.getElementById('root'));

我已经用React v16.8.1进行了检查

对于使用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'

该应用已部署，没有源地图。

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

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

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

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

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version