如何知道在浏览器中运行时运行的 React 版本？答案

【问题标题】：How can one tell the version of React running at runtime in the browser?如何知道在浏览器中运行时运行的 React 版本？
【发布时间】：2016-08-27 22:24:44
【问题描述】：

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

【问题讨论】：

打开调试器工具，查看源文件，找到 React 的 javascript 文件，然后打开它。库通常会将其版本打印在顶部，即使它们已被缩小。有时，您还可以通过文件名来识别版本。
在您的 Chrome 控制台中使用 React 开发者工具，__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next()["value"]["version"]

标签： javascript reactjs

【解决方案1】：

如果您已经部署了使用 webpack 的应用程序。您可以使用以下步骤来识别“react”和“react-dom”。

在浏览器中打开 DeveloperTool
转到源选项卡
检查您的appName.js 文件
搜索“react”或“react-dom” 你会发现类似下面的东西。这将是您的 react-app 正在使用的版本。

"webpack/sharing/consume/default/react/react?1aa9": () => (loadStrictVersionCheckFallback("default", "react", [,[1,17,0,0],[1,16 ,8,0],1],// ..SOMETHINNG

"webpack/sharing/consume/default/react-dom/react-dom?8d07": () => (loadStrictVersionCheckFallback("default", "react-dom", [,[1,17,0,0 ],[1,16,8,0],1], // ..SOMETHINNG

或

register("react-dom", "17.0.2", () // ..SOMETHING

register("react", "17.0.2", ()// ..SOMETHINNG

注意：仅适用于已部署的应用程序

【讨论】：

【解决方案2】：

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

npm view react version
or
yarn view react version

或者你也可以在你的项目中打开你的 package.json 文件，在“dependencies”下勾选“react”：分号后面就是你的 react 版本

【讨论】：

【解决方案3】：

这个策略应该一直有效：最后必须通过脚本标签将 React 包含在 html 中的 js 文件中。所以找到那个文件并寻找 React 版本。

浏览 HTML 中包含的所有脚本（查看源代码）
其中一个链接包括 React 的脚本。 WebPack 将库集中在一个 common-xxxx.js 文件下
打开该脚本文件并 ctrl + f 搜索 React
Presto，那里有版本号

【讨论】：

【解决方案4】：

要知道react版本，打开根目录下的package.json文件，搜索keywork react。你会看到像 "react": "^16.4.0",

【讨论】：

问题是如何在浏览器中分辨 React 版本。

【解决方案5】：

React.version 就是你要找的。p>

尽管它没有文档记录（据我所知），所以它可能不是一个稳定的功能（即虽然不太可能，但它可能会在未来的版本中消失或改变）。

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

【讨论】：

我能够在程序的入口点通过 console.log(React.version) 获取版本
@gotofritz 没有？我刚刚使用 React 16.0.0 进行了测试，它仍然可以工作。你用的是什么反应版本？怎么导入？
可能取决于应用的打包方式。使用 create-react-app 没有全局 React 对象。
没有。如果您将 react 作为模块导入，则没有 React 全局。在这种情况下，您需要先导入模块并获取模块的version 属性。
这在使用 ReactJS 并且您正在尝试查找版本的网站上不起作用。我已经在几个网站上尝试过这个，但我一直收到错误：Uncaught ReferenceError: require is not defined 和 Uncaught ReferenceError: React is not defined

【解决方案6】：

从命令行查看反应版本， npm 查看反应版本

【讨论】：

请在回答前仔细阅读问题。问题是通过浏览器而不是命令行来了解。
这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
覆盖在stackoverflow.com/a/58879522

【解决方案7】：

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

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

【讨论】：

【解决方案8】：

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

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

输出类似：

react-dom: 16.12.0

【讨论】：

这似乎是找出网站上使用的 React 版本的唯一实际可行的解决方案。

【解决方案9】：

从命令行：

npm view react version
npm view react-native version

【讨论】：

【解决方案10】：

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

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

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

window.React 未定义。
在 Chrome 96 中为我工作，谢谢！！

【解决方案12】：

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

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

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

【讨论】：

【解决方案13】：

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

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

应用部署时没有源地图。

【讨论】：

【解决方案14】：

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

方法一：查看ECMAScript：

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

加载网页（你可以试试https://www.instagram.com他们完全是酷莱德）
在 Sources 选项卡上打开 Chrome 开发者工具（control+shift+i 或 command+shift+i）
1. 在“源”选项卡上打开开发工具
在顶部菜单栏的最右侧，单击垂直省略号并选择搜索所有文件
在左侧的搜索框中输入大写字母FIRED，清除复选框忽略大小写，输入Enter
1. 一个或多个匹配项出现在下方。该版本是非常接近搜索字符串的导出，类似于 version: "16.0.0"
如果版本号不是立即可见：双击以行号开头的行
1. ECMAScript 出现在中间窗格中
如果版本号不是立即可见：单击 ECMAScript 窗格左下角的两个大括号 {}
1. ECMAScript 重新格式化，更易于阅读
如果版本号不是立即可见：上下滚动几行以找到它或尝试其他搜索键
1. 如果代码没有缩小，搜索ReactVersion 应该有 2 个具有相同值的匹配
2. 如果代码被缩小，搜索 SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 或 react-dom
3. 或搜索可能的版本字符串本身："15. 或 "16. 甚至 "0.15

方法二：使用 DOM 断点：

加载 React 渲染的页面
右键单击 React 元素（任何东西，如输入字段或框）并选择 Inspect Element
1. Chrome 开发者工具显示Elements 窗格
从选定元素在树中尽可能高，但不高于 React 根元素（通常是直接在 body 内部的 div，id 为 root： )，右键单击一个元素并选择Break On… - subtree modifications

注意：可以将元素选项卡的内容（DOM 当前状态）与网络选项卡上相同资源的响应进行比较。这可能会揭示 React 的根元素
通过单击地址栏左侧的重新加载来重新加载页面

Chrome 开发者工具在断点处停止并显示Sources 窗格

在最右侧的窗格中，检查 Call Stack 子窗格

尽可能在调用堆栈的下方，应该有一个render 条目，这是ReactDOM.render

点击render下面的行，即。调用渲染的代码

中间窗格现在显示 ECMAScript，其中突出显示了包含 .render 的表达式

将鼠标光标悬停在用于调用渲染的对象上。 react-dom 模块导出对象

如果代码行：Object(u.render)(...，将鼠标悬停在 u

会显示一个工具提示窗口，其中包含version: "15.6.2"，即。 react-dom 导出的所有值

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

【讨论】：