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

How can one tell the version of React running at runtime in the browser?

提问by leojh

Is there a way to know the runtime version of React in the browser?

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

回答by Quentin Roy

React.versionis what you are looking for.

React.version就是你要找的。

It is undocumented though (as far as I know) so it may not be a stable feature (i.e. though unlikely, it may disappear or change in future releases).

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

Example with Reactimported as a script

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>

Example with Reactimported as a module

React作为模块导入的示例

import React from 'react';

console.log(React.version);

Obviously, if you import Reactas a module, it won't be in the global scope. The above code is intended to be bundled with the rest of your app, e.g. using webpack. It will virtually never work if used in a browser's console (it is using bare input).

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

This second approach is the recommended one. Most websites will use it. create-react-appdoes this (it's using webpackbehind the scene). In this case, Reactis encapsulated and is generally not accessible at all outside the bundle (e.g. in a browser's console).

第二种方法是推荐的方法。大多数网站都会使用它。create-react-app 就是这样做的（它在幕后使用webpack）。在这种情况下，React被封装并且通常在包之外根本无法访问（例如在浏览器的控制台中）。

回答by wbartussek

From the command line:

从命令行：

npm view react version
npm view react-native version

回答by Johan Henriksson

Open Chrome Dev Tools or equivalent and run require('React').versionin the console.

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

That works on websites like Facebook as well to find out what version they are using.

这也适用于 Facebook 等网站，以了解他们使用的版本。

回答by Harald Rudell

It is not certain that any global ECMAScript variables have been exported and html/css does not necessarily indicate React. So look in the .js.

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

Method 1: Look in ECMAScript:

方法一：在ECMAScript中查看：

The version number is exported by both modules react-domand reactbut those names are often removed by bundling and the version hidden inside an execution context that cannot be accessed. A clever break point may reveal the value directly, or you can search the ECMAScript:

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

1. Load the Web page (you can try https://www.instagram.comthey're total Coolaiders)
2. Open Chrome Developer Tools on Sources tab (control+shift+i or command+shift+i)
   1. Dev tools open on the Sources tab
3. In the very right of the top menu bar, click the vertical ellipsis and select search all files
4. In he search box down on left type FIREDin capital letters, clear the checkbox Ignore case, type Enter
   1. One or more matches appear below. The version is an export very close to the search string looking like version: "16.0.0"
5. If the version number is not immediately visible: double click a line that begins with a line number
   1. ECMAScript appears in the middle pane
6. If the version number is not immediately visible: click the two braces at bottom left of the ECMAScript pane {}
   1. ECMAScript is reformatted and easier to read
7. If the version number is not immediately visible: scroll up and down a few lines to find it or try another search key
   1. If the code is not minified, search for ReactVersionThere should be 2 hits with the same value
   2. If the code is minified, search for either SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIREDor react-dom
   3. Or search for the likely version string itself: "15.or "16.or even "0.15

1. 加载网页（你可以试试https://www.instagram.com他们都是 Coolaiders）
2. 在 Sources 选项卡上打开 Chrome 开发者工具（control+shift+i 或 command+shift+i）
   1. 在 Sources 选项卡上打开的开发工具
3. 在顶部菜单栏的最右侧，单击垂直省略号并选择搜索所有文件
4. 在左侧的搜索框中输入FIRED大写字母，清除复选框Ignore case，输入Enter
   1. 下面显示一个或多个匹配项。该版本是非常接近搜索字符串的导出版本，类似于version: "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

Method 2: Use a DOM breakpoint:

方法二：使用DOM断点：

1. Load the page rendered by React
2. Right click a React element (anything, like an input field or a box) and select Inspect Element
   1. Chrome Developer Tools displays the Elementspane
3. As high up in the tree as possible from the selected element, but no higher than the React root element (often a div directly inside body with id root: <div id="root">), right click an element and select Break On… - subtree modifications
   1. Note: It is possible to compare contents of the Elements tab (DOM current state) with the response for the same resouce on the Networks tab. This may reveal React's root element
4. Reload the page by clicking Reload left of the address bar
   1. Chrome Developer Tools stops at the breakpoint and displays the Sourcespane
5. In the rightmost pane, examine the Call Stacksub-pane
6. As far down the call stack as possible, there should be a renderentry, this is ReactDOM.render
7. Click the line below render, ie. the code that invokes render
8. The middle pane now displays ECMAScript with an expression containing .renderhighlighted
9. Hover the mouse cursor over the object used to invoke render, is. the react-dommodule exports object
   1. if the code line goes: Object(u.render)(…, hover over the u
10. A tooltip window is displayed containing version: "15.6.2", ie. all values exported by react-dom

1. 加载 React 渲染的页面
2. 右键单击一个 React 元素（任何东西，如输入字段或框）并选择 Inspect Element
   1. Chrome 开发者工具显示Elements窗格
3. 在树中距离所选元素尽可能高的地方，但不高于 React 根元素（通常是直接在 body 内部的 div，id 为 root: <div id="root">），右键单击一个元素并选择Break On… - subtree modifications
   1. 注意：可以将元素选项卡的内容（DOM 当前状态）与网络选项卡上相同资源的响应进行比较。这可能会揭示 React 的根元素
4. 单击地址栏左侧的 Reload 重新加载页面
   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

The version is also injected into React dev tools, but as far as I know not displayed anywhere.

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

回答by domdomegg

With the React Devtools installed you can run this from the browser console:

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

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

Which outputs something like:

输出类似：

react-dom: 16.12.0

回答by Faiyaz Alam

In index.js file, simply replace Appcomponent with "React.version". E.g.

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

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

I have checked this with React v16.8.1

我已经用 React v16.8.1 检查过这个

回答by jgrumps

Open the console, then run window.React.version.

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

This worked for me in Safari and Chrome while upgrading from 0.12.2 to 16.2.0.

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

回答by Fierascu Gheorghe

For an app created with create-react-appI managed to see the version:

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

1. Open Chrome Dev Tools / Firefox Dev Tools,
2. Search and open main.XXXXXXXX.js file where XXXXXXXX is a builds hash /could be different,
3. Optional: format source by clicking on the {} to show the formatted source,
4. Search as text inside the source for react-dom,
5. in Chrome was found: "react-dom": "^16.4.0",
6. in Firefox was found: 'react-dom': '^16.4.0'

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'

The app was deployed without source map.

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

回答by DrNio

In an existing project a simple way to see the React version is to go to a rendermethod of any component and add:

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

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

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

This assumes you import React like this: import React from 'react'

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