Как узнать, какая версия React запущена во время выполнения в браузере?

Есть ли способ узнать версию 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 на вкладке «Источники» (control + shift + i или command + shift + i)
   1. Инструменты разработчика открываются на вкладке "Источники"
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 или response -dom
   3. Или найдите саму строку с вероятной версией: «15. или » 16. или даже "0,15

Метод 2: используйте точку останова DOM:

1. Загрузите страницу, отрисованную React
2. Щелкните правой кнопкой мыши элемент React (что угодно, например поле ввода или поле) и выберите Inspect Element
   1. В Инструментах разработчика Chrome отображается Elementsпанель
3. Как можно выше в дереве от выбранного элемента, но не выше корневого элемента React (часто div непосредственно внутри тела с 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, т.е. код, который вызывает рендеринг
8. На средней панели теперь отображается ECMAScript с выделенным выражением, содержащим .render.
9. Наведите курсор мыши на объект, используемый для вызова рендеринга, is. react-domобъект экспорта модуля
   1. если строка кода выглядит так : Object (u.render) (… , наведите указатель мыши на u
10. Появится всплывающее окно, содержащее version: "15.6.2", т.е. все значения экспортированыreact-dom

Версия также вводится в инструменты разработки React, но, насколько я знаю, нигде не отображается.

Откройте консоль, затем запустите window.React.version.

У меня это сработало в Safari и Chrome при обновлении с 0.12.2 до 16.2.0.

В файле index.js просто замените компонент приложения на «React.version». Например

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

Я проверил это с помощью React v16.8.1

Для приложения, созданного с помощью create-response-app, мне удалось увидеть версию:

1. Откройте Инструменты разработчика Chrome / Инструменты разработчика Firefox,
2. Найдите и откройте файл main.XXXXXXXX.js, где XXXXXXXX - хеш сборки / может быть другим,
3. Необязательно: отформатируйте источник, нажав на {}, чтобы отобразить отформатированный источник,
4. Искать как текст внутри исходного кода для react-dom,
5. в Chrome обнаружено: "react-dom": "^ 16.4.0",
6. в Firefox обнаружено: 'response-dom': '^ 16.4.0'

Приложение было развернуто без карты источников.

В существующем проекте простой способ увидеть версию React - перейти к renderметоду любого компонента и добавить:

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

Предполагается, что вы импортируете React следующим образом: import React from 'react'

Сначала установите инструменты разработчика React, если они не установлены, а затем используйте приведенный ниже код в консоли браузера:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

Из командной строки для просмотра версии реакции, npm просмотра версии реакции