怎样才能知道在浏览器中运行的 React 版本？

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

272521 次浏览
小开
最佳答案

React.version就是你要找的。

但是它是没有文档的(据我所知) ，所以它可能不是一个稳定的特性(也就是说，虽然不太可能，但它可能会在未来的版本中消失或改变)。

以脚本形式导入 React的示例

const REACT_VERSION = React.version;


let root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<div>React version: {REACT_VERSION}</div>
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>


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

以模块形式导入 React的示例

import { version } from 'react';


console.log(version);

显然，如果将 React作为模块导入，它将不在全局作用域中。上面的代码是打算绑定到您的应用程序的其余部分，例如使用 网络包。如果使用在浏览器的控制台上，它实际上永远不会工作(它使用的是裸导入)。

第二种方法是推荐的方法。大多数网站都会使用它。创建-反应-应用程序这样做(它在幕后使用 网络包)。在这种情况下，React是封装的，通常不能在捆绑包之外访问(例如在浏览器的控制台中)。

小开

打开 Chrome 开发工具或其他类似工具，在控制台中运行 require('React').version。

这种方法也适用于像 Facebook 这样的网站，用来查明他们使用的是什么版本。

小开

不能确定是否导出了任何全局 ECMAScript 变量，html/css 不一定表示 React。所以看看。JS.

方法1: 查看 ECMAScript:

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

  1. 加载网页(您可以尝试 https://www.instagram.com，他们是完全冷却器)
  2. 打开“ Chrome 开发工具源代码”选项卡(控制 + shift + i 或命令 + shift + i)
    1. 在“源”选项卡上打开开发工具
  3. 在顶部菜单栏的右侧，单击垂直省略号并选择 搜索所有文件
  4. 在搜索框的左下方键入大写字母 被解雇了，清除复选框 别管案子了，键入 < strong > Enter
    1. 一个或多个匹配出现在下面。版本是一个非常接近搜索字符串的导出，看起来像 版本: 「16.0.0」
  5. 如果版本号不能立即看到，请双击以行号开头的行
    1. ECMAScript 显示在中间窗格中
  6. 如果版本号不能立即看到，请单击 ECMAScript 窗格 < strong > {}左下角的两个大括号
    1. ECMAScript 被重新格式化并且更容易阅读
  7. 如果版本号不能立即看到: 向上和向下滚动几行找到它或尝试另一个搜索键
    1. 如果代码没有缩小，请搜索 < strong > ReactVersion 应该有两个命中值相同
    2. 如果代码被缩小，则搜索 不要使用，否则你将被解雇或 做出反应
    3. 或者搜索可能的版本字符串本身: “15。或 “16。，甚至 “0.15

方法2: 使用 DOM 断点:

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

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

小开

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

这对我在 Safari 和 Chrome 浏览器中工作，同时从0.12.2升级到16.2.0。

小开

对于一个用 创建-反应-应用程序创建的应用程序，我设法查看了它的版本:

  1. 打开 Chrome 开发工具/Firefox 开发工具,
  2. 搜索并打开 main.XXXXXXXX.js 文件，其中 XXXXXXXX 是构建散列/可能不同,
  3. 可选: 通过点击{}来显示格式化的源,
  4. 以文本的形式在源代码中搜索反应域,
  5. 在 Chrome 浏览器中发现: “ response-dom”: “ ^ 16.4.0”,
  6. 在 Firefox 中发现: ‘ response-dom’: ‘ ^ 16.4.0’

这个应用程序在没有源地图的情况下部署。

小开

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

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

我已经用 React v16.8.1检查过了

小开

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

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

这假设您导入如下反应: import React from 'react'

小开

从命令行:

npm view react version
npm view react-native version
小开

安装了 React Devtools 后，你可以在浏览器控制台上运行:

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

其输出类似于:

react-dom: 16.12.0
小开

如果没有安装，首先安装 React dev 工具，然后在浏览器控制台中运行以下代码:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version
小开

要了解 response 版本，请在根文件夹中打开 package.json 文件，搜索 keywork response。你会看到像“反应”: “ ^ 16.4.0”,

小开

这个策略应该始终有效: 最后 React 必须通过 script 标记包含在 html 中的一个 js 文件中。所以，找到那个文件，并寻找反应版本。

  1. 查看 HTML 中包含的所有脚本(视图源)
  2. 其中一个链接包含 React. WebPack 脚本，该脚本将这些库放在一个 common-xxx.js 文件下
  3. 打开该脚本文件并在 ctrl + f 中搜索 React
  4. 很快，版本号出来了
小开

您可以在您的终端上运行以下命令，这取决于您是使用 npm 还是纱线:

npm view react version
or
yarn view react version

或者您也可以在您的项目中打开 package.json 文件，位于“依赖关系”检查“反应”之下: 分号之后将是您的反应版本

小开

如果您已经部署了使用 webpack 的应用程序。您可以使用下面的步骤来识别“反应”和“反应领域”。

  1. 在浏览器中打开 DeveloperTool
  2. 转到源标签页
  3. 检查 appName.js 文件
  4. 搜索“反应”或“反应域” 你会发现类似下面的东西。这将是你的反应应用程序使用的版本。

() = > (loadStrictVersionCheckFallback (“ default”，“ response”，[ ，[1,17,0,0] ，[1,16,8,0] ，1] ,//

() = > (loadStrictVersionCheckFallback (“ default”，“ response-dom”，[ ，[1,17,0,0] ，[1,16,8,0] ，1] ,//

或者

寄存器(“反应 -dom”，“17.0.2”，()//. . 东西

寄存器(“反应”，“17.0.2”，()//. . 东西

注意: 它只适用于已部署的应用程序

小开

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

下面是我在自己的网站上执行时的输出( nikolovlazar.com ) Check React version in production

小开

使用命令行命令检查 ReactJS 的版本。

npm view react version
or
yarn view react version

提交答案