Bagaimana cara mengetahui versi React yang berjalan saat runtime di browser?

Apakah ada cara untuk mengetahui versi runtime dari React di browser?

React.version adalah apa yang Anda cari.

Ini tidak berdokumen meskipun (sejauh yang saya tahu) jadi ini mungkin bukan fitur yang stabil (yaitu meskipun tidak mungkin, itu mungkin hilang atau berubah dalam rilis mendatang).

Contoh dengan Reactdiimpor sebagai skrip

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>

Contoh dengan Reactdiimpor sebagai modul

import React from 'react';

console.log(React.version);

Jelas, jika Anda mengimpor Reactsebagai modul, itu tidak akan berada dalam cakupan global. Kode di atas dimaksudkan untuk digabungkan dengan aplikasi Anda lainnya, misalnya menggunakan webpack . Ini hampir tidak akan pernah berfungsi jika digunakan di konsol browser (ini menggunakan input kosong).

Pendekatan kedua ini adalah yang direkomendasikan. Sebagian besar situs web akan menggunakannya. create-react-app melakukan ini (ini menggunakan webpack di belakang layar). Dalam kasus ini, Reactdienkapsulasi dan umumnya tidak dapat diakses sama sekali di luar bundel (misalnya di konsol browser).

Dari baris perintah:

npm view react version
npm view react-native version

Buka Chrome Dev Tools atau yang setara dan jalankan require('React').versiondi konsol.

Itu berfungsi di situs web seperti Facebook juga untuk mengetahui versi apa yang mereka gunakan.

Dengan menginstal React Devtools, Anda dapat menjalankan ini dari konsol browser:

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

Yang menghasilkan sesuatu seperti:

react-dom: 16.12.0

Tidak ada kepastian bahwa variabel ECMAScript global telah diekspor dan html / css tidak selalu menunjukkan React. Jadi lihat di .js.

Metode 1: Lihat di ECMAScript:

Nomor versi diekspor oleh kedua modul react-dom dan react tetapi nama-nama itu sering dihapus dengan bundling dan versi disembunyikan di dalam konteks eksekusi yang tidak dapat diakses. Sebuah break point pintar dapat mengungkapkan nilai secara langsung, atau Anda dapat mencari ECMAScript:

1. Muat halaman Web (Anda dapat mencoba https://www.instagram.com, mereka adalah Coolaiders total)
2. Buka Alat Pengembang Chrome di tab Sumber (control + shift + i atau command + shift + i)
   1. Alat pengembang terbuka di tab Sumber
3. Di bagian paling kanan dari bilah menu atas, klik elipsis vertikal dan pilih cari semua file
4. Di kotak pencarian di sebelah kiri ketik FIRED dalam huruf besar, kosongkan kotak centang Abaikan kasus , ketik Enter
   1. Satu atau lebih kecocokan muncul di bawah. Versi ini adalah ekspor yang sangat dekat dengan string pencarian yang terlihat seperti versi: "16.0.0"
5. Jika nomor versi tidak langsung terlihat: klik dua kali baris yang dimulai dengan nomor baris
   1. ECMAScript muncul di panel tengah
6. Jika nomor versi tidak langsung terlihat: klik dua tanda kurung di kiri bawah panel ECMAScript {}
   1. ECMAScript diformat ulang dan lebih mudah dibaca
7. Jika nomor versi tidak langsung terlihat: gulir ke atas dan ke bawah beberapa baris untuk menemukannya atau coba tombol pencarian lain
   1. Jika kode tidak diminimalkan, cari ReactVersion Harus ada 2 klik dengan nilai yang sama
   2. Jika kode dikecilkan, cari SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED atau react-dom
   3. Atau telusuri kemungkinan string versi itu sendiri: "15. atau " 16. atau bahkan "0,15

Metode 2: Gunakan breakpoint DOM:

1. Muat halaman yang dirender oleh React
2. Klik kanan elemen React (apa saja, seperti kolom input atau kotak) dan pilih Inspect Element
   1. Alat Pengembang Chrome menampilkan Elementspanel
3. Setinggi mungkin di pohon dari elemen yang dipilih, tetapi tidak lebih tinggi dari elemen akar React (seringkali div langsung di dalam tubuh dengan root id: <div id = "root"> ), klik kanan elemen dan pilihBreak On… - subtree modifications
   1. Catatan: Anda dapat membandingkan konten tab Elemen (status DOM saat ini) dengan respons untuk sumber daya yang sama di tab Jaringan. Ini dapat mengungkapkan elemen root React
4. Muat ulang halaman dengan mengklik Muat Ulang di kiri bilah alamat
   1. Alat Pengembang Chrome berhenti di breakpoint dan menampilkan Sourcespanel
5. Di panel paling kanan, periksa Call Stacksub-panel
6. Sejauh mungkin di tumpukan panggilan, harus ada renderentri, iniReactDOM.render
7. Klik baris di bawah render, yaitu. kode yang memanggil render
8. Panel tengah sekarang menampilkan ECMAScript dengan ekspresi berisi .render yang disorot
9. Arahkan kursor mouse ke atas objek yang digunakan untuk menjalankan render, is. yang react-domekspor modul obyek
   1. jika baris kode berbunyi: Object (u.render) (… , arahkan kursor ke atas u
10. Jendela tooltip ditampilkan berisi version: "15.6.2", yaitu. semua nilai yang diekspor olehreact-dom

Versi ini juga disuntikkan ke alat dev React, tetapi sejauh yang saya tahu tidak ditampilkan di mana pun.

Buka konsol, lalu jalankan window.React.version.

Ini berfungsi untuk saya di Safari dan Chrome saat meningkatkan dari 0.12.2 ke 16.2.0.

Di file index.js, cukup ganti komponen App dengan "React.version". Misalnya

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

Saya telah memeriksa ini dengan React v16.8.1

Untuk aplikasi yang dibuat dengan create-react-app, saya berhasil melihat versinya:

1. Buka Alat Pengembang Chrome / Alat Pengembang Firefox,
2. Cari dan buka file main.XXXXXXXX.js di mana XXXXXXXX adalah hash / build yang bisa berbeda,
3. Opsional: format sumber dengan mengklik {} untuk menampilkan sumber yang diformat,
4. Telusuri sebagai teks di dalam sumber react-dom,
5. di Chrome ditemukan: "react-dom": "^ 16.4.0",
6. di Firefox ditemukan: 'react-dom': '^ 16.4.0'

Aplikasi diterapkan tanpa peta sumber.

Dalam proyek yang sudah ada, cara sederhana untuk melihat versi React adalah pergi ke rendermetode komponen apa pun dan menambahkan:

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

Ini mengasumsikan Anda mengimpor React seperti ini: import React from 'react'

Pertama, Instal alat dev React jika tidak diinstal, lalu gunakan kode di bawah ini di konsol browser:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version