Po czym poznać wersję Reacta działającą w czasie wykonywania w przeglądarce?

Czy jest sposób, aby poznać wersję uruchomieniową Reacta w przeglądarce?

React.version jest tym, czego szukasz.

Jest to jednak nieudokumentowane (o ile wiem), więc może nie być stabilną funkcją (tj. Choć mało prawdopodobne, może zniknąć lub ulec zmianie w przyszłych wydaniach).

Przykład z Reactimportem jako skrypt

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>

Przykład z Reactimportem jako moduł

import React from 'react';

console.log(React.version);

Oczywiście, jeśli importujesz Reactjako moduł, nie będzie on objęty zakresem globalnym. Powyższy kod jest przeznaczony do dołączenia do reszty aplikacji, np. Za pomocą webpacka . Praktycznie nigdy nie zadziała, jeśli zostanie użyty w konsoli przeglądarki (używa samego wejścia).

To drugie podejście jest zalecane. Będzie go używać większość witryn internetowych. create-react-app robi to (używa webpacka za kulisami ). W tym przypadku Reactjest hermetyzowany i generalnie nie jest w ogóle dostępny poza pakietem (np. W konsoli przeglądarki).

Z wiersza poleceń:

npm view react version
npm view react-native version

Otwórz Chrome Dev Tools lub odpowiednik i uruchom require('React').versionw konsoli.

Działa to również w witrynach takich jak Facebook, aby dowiedzieć się, jakiej wersji używają.

Po zainstalowaniu React Devtools możesz uruchomić to z konsoli przeglądarki:

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

Który wyświetla coś takiego:

react-dom: 16.12.0

Nie ma pewności, czy jakiekolwiek globalne zmienne ECMAScript zostały wyeksportowane, a html / css niekoniecznie oznacza React. Więc spójrz na .js.

Metoda 1: Zajrzyj do ECMAScript:

Numer wersji jest eksportowany przez oba moduły reaguj-dom i reaguj, ale te nazwy są często usuwane przez pakowanie, a wersja jest ukryta w kontekście wykonania, do którego nie można uzyskać dostępu. Sprytny punkt przerwania może bezpośrednio ujawnić wartość lub możesz przeszukać ECMAScript:

1. Załaduj stronę internetową (możesz wypróbować https://www.instagram.com to totalne Coolaiders)
2. Otwórz narzędzia Chrome Developer Tools na karcie Źródła (Ctrl + Shift + I lub Command + Shift + I)
   1. Narzędzia deweloperskie są otwierane na karcie Źródła
3. Po prawej stronie górnego paska menu kliknij pionową wielokropek i wybierz opcję przeszukaj wszystkie pliki
4. W polu wyszukiwania po lewej stronie wpisz FIRED dużymi literami, odznacz pole wyboru Ignoruj wielkość liter , wpisz Enter
   1. Co najmniej jedno dopasowanie pojawia się poniżej. Wersja jest eksportem bardzo zbliżonym do szukanego ciągu i wygląda jak wersja: „16.0.0”
5. Jeśli numer wersji nie jest od razu widoczny: kliknij dwukrotnie wiersz zaczynający się od numeru wiersza
   1. ECMAScript pojawi się w środkowym okienku
6. Jeśli numer wersji nie jest od razu widoczny: kliknij dwa nawiasy klamrowe w lewym dolnym rogu panelu ECMAScript {}
   1. ECMAScript jest przeformatowany i łatwiejszy do odczytania
7. Jeśli numer wersji nie jest od razu widoczny: przewiń kilka wierszy w górę lub w dół, aby go znaleźć lub wypróbuj inny klawisz wyszukiwania
   1. Jeśli kod nie jest zminimalizowany, wyszukaj ReactVersion Powinny istnieć 2 trafienia o tej samej wartości
   2. Jeśli kod jest zminimalizowany, wyszukaj SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED lub React -dom
   3. Lub wyszukaj sam prawdopodobny ciąg wersji: „15. lub „ 16 ”. lub nawet „0,15

Metoda 2: Użyj punktu przerwania DOM:

1. Załaduj stronę renderowaną przez Reacta
2. Kliknij prawym przyciskiem myszy element React (cokolwiek, na przykład pole wejściowe lub ramkę) i wybierz Inspect Element
   1. Narzędzia Chrome Developer Tools wyświetlą Elementspanel
3. Jak najwyżej w drzewie, jak to możliwe od wybranego elementu, ale nie wyżej niż element główny React (często jest to element div bezpośrednio w treści o identyfikatorze root: <div id = "root"> ), kliknij prawym przyciskiem myszy element i wybierzBreak On… - subtree modifications
   1. Uwaga: możliwe jest porównanie zawartości zakładki Elementy (aktualny stan DOM) z odpowiedzią dla tego samego zasobu na zakładce Sieci. Może to ujawnić główny element Reacta
4. Załaduj ponownie stronę, klikając Odśwież po lewej stronie paska adresu
   1. Narzędzia Chrome Developer Tools zatrzymują się w punkcie przerwania i wyświetlają Sourcesokienko
5. W panelu znajdującym się najbardziej po prawej stronie przyjrzyj się Call Stackokienku podrzędnym
6. Tak daleko w dół stosu wywołań powinien znajdować się renderwpisReactDOM.render
7. Kliknij linię poniżej render, tj. kod, który wywołuje render
8. Środkowy panel wyświetla teraz ECMAScript z podświetlonym wyrażeniem zawierającym .render
9. Najedź kursorem myszy na obiekt użyty do wywołania renderowania, jest. react-domprzedmiot eksportu modułu
   1. jeśli linia kodu idzie: Object (u.render) (… , najedź kursorem na u
10. Zostanie wyświetlone okno podpowiedzi zawierające version: "15.6.2"m.in. wszystkie wartości wyeksportowane przezreact-dom

Wersja jest również wstrzykiwana do narzędzi deweloperskich React, ale o ile wiem, nigdzie nie jest wyświetlana.

Otwórz konsolę, a następnie uruchom window.React.version.

To działało dla mnie w Safari i Chrome podczas aktualizacji z 0.12.2 do 16.2.0.

W pliku index.js po prostu zamień komponent aplikacji na „React.version”. Na przykład

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

Sprawdziłem to w React v16.8.1

W przypadku aplikacji utworzonej za pomocą aplikacji create-react-app udało mi się zobaczyć wersję:

1. Otwórz Chrome Dev Tools / Firefox Dev Tools,
2. Wyszukaj i otwórz plik main.XXXXXXXX.js, gdzie XXXXXXXX to skrót kompilacji / może być inny,
3. Opcjonalnie: sformatuj źródło, klikając {}, aby wyświetlić sformatowane źródło,
4. Szukaj jako tekst w źródle dla react-dom,
5. w Chrome znaleziono: "React-dom": "^ 16.4.0",
6. w Firefoksie znaleziono: „React-dom”: „^ 16.4.0”

Aplikacja została wdrożona bez mapy źródłowej.

W istniejącym projekcie prostym sposobem zobaczenia wersji Reacta jest przejście do rendermetody dowolnego komponentu i dodanie:

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

Zakłada się, że importujesz Reacta w następujący sposób: import React from 'react'

Najpierw zainstaluj narzędzia deweloperskie React, jeśli nie są zainstalowane, a następnie użyj poniższego kodu w konsoli przeglądarki:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version