Tarayıcıda çalışma zamanında çalışan React versiyonunu nasıl anlarım?

Tarayıcıda React'in çalışma zamanı sürümünü öğrenmenin bir yolu var mı?

React.version aradığınız şey.

Yine de belgelenmemiş (bildiğim kadarıyla), bu nedenle kararlı bir özellik olmayabilir (yani, pek olası olmasa da, kaybolabilir veya gelecekteki sürümlerde değişebilir).

ReactKomut dosyası olarak içe aktarılmış örnek

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>

ReactModül olarak içe aktarılmış örnek

import React from 'react';

console.log(React.version);

Açıkçası, Reactbir modül olarak içe aktarırsanız , bu genel kapsamda olmayacaktır. Yukarıdaki kodun, uygulamanızın geri kalanıyla birlikte paketlenmesi amaçlanmıştır, örneğin web paketi kullanılarak . Bir tarayıcının konsolunda kullanılırsa neredeyse hiç çalışmaz (çıplak giriş kullanır).

Bu ikinci yaklaşım tavsiye edilen yaklaşımdır. Çoğu web sitesi bunu kullanacaktır. create-react-app bunu yapar ( sahnenin arkasında webpack kullanıyor ). Bu durumda, Reactkapsüllenir ve genellikle paketin dışından erişilemez (örneğin bir tarayıcı konsolunda).

Komut satırından:

npm view react version
npm view react-native version

Chrome Dev Tools veya eşdeğerini açın require('React').versionve konsolda çalıştırın .

Bu, Facebook gibi web sitelerinde de hangi sürümü kullandıklarını öğrenmek için çalışır.

React Devtools kurulduğunda, bunu tarayıcı konsolundan çalıştırabilirsiniz:

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

Aşağıdakilere benzer bir çıktı veren:

react-dom: 16.12.0

Herhangi bir global ECMAScript değişkeninin dışa aktarıldığı kesin değildir ve html / css mutlaka React'i göstermez. Yani .js'ye bakın.

Yöntem 1: ECMAScript'e bakın:

Sürüm numarası her iki modül react-dom ve react tarafından dışa aktarılır , ancak bu adlar genellikle paketlenerek kaldırılır ve sürüm erişilemeyen bir yürütme bağlamı içinde gizlenir. Akıllı bir kırılma noktası, değeri doğrudan ortaya çıkarabilir veya ECMAScript'te arama yapabilirsiniz:

1. Web sayfasını yükleyin ( https: //www.instagram.com'u deneyebilirsiniz, bunlar toplam Coolaiders)
2. Kaynaklar sekmesinde Chrome Geliştirici Araçlarını açın (control + shift + i veya command + shift + i)
   1. Geliştirme araçları Kaynaklar sekmesinde açılır
3. Üst menü çubuğunun en sağında, dikey üç noktayı tıklayın ve tüm dosyaları ara'yı seçin
4. O sol türüne aşağı Arama kutusunun içinde YAKMALI büyük harflerle, onay kutusu temizleyin durumda yoksay , tip girin
   1. Aşağıda bir veya daha fazla eşleşme görünüyor. Sürüm, arama dizesine çok yakın, sürüm gibi görünen bir dışa aktarmadır : "16.0.0"
5. Sürüm numarası hemen görünmüyorsa: satır numarasıyla başlayan bir satırı çift tıklayın
   1. ECMAScript orta bölmede görünür
6. Sürüm numarası hemen görünmüyorsa: ECMAScript bölmesinin sol alt tarafındaki iki küme ayracı tıklayın {}
   1. ECMAScript yeniden biçimlendirildi ve okunması daha kolay
7. Sürüm numarası hemen görünmüyorsa: bulmak için birkaç satır yukarı ve aşağı kaydırın veya başka bir arama tuşu deneyin
   1. Kod küçültülmemişse, ReactVersion'ı arayın Aynı değere sahip 2 isabet olmalıdır
   2. Kod küçültülmüşse, SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED veya react- dom'u arayın
   3. Veya olası sürüm dizesinin kendisini arayın: "15. veya " 16. hatta "0.15

Yöntem 2: DOM kesme noktası kullanın:

1. React tarafından oluşturulan sayfayı yükleyin
2. Bir React öğesine sağ tıklayın (giriş alanı veya kutu gibi herhangi bir şey) ve seçin Inspect Element
   1. Chrome Geliştirici Araçları Elementsbölmeyi görüntüler
3. Ağaçta seçili öğeden olabildiğince yüksekte, ancak React kök öğesinden daha yüksek değil (genellikle doğrudan gövdede, id kökü olan bir div: <div id = "root"> ), bir öğeyi sağ tıklayın ve seçinBreak On… - subtree modifications
   1. Not: Öğeler sekmesinin (DOM mevcut durumu) içeriğini, Ağlar sekmesindeki aynı kaynağa ilişkin yanıtla karşılaştırmak mümkündür. Bu, React'in kök öğesini ortaya çıkarabilir
4. Adres çubuğunun solundaki Yeniden yükle'yi tıklayarak sayfayı yeniden yükleyin
   1. Chrome Geliştirici Araçları kesme noktasında durur ve Sourcesbölmeyi görüntüler
5. En sağdaki bölmede Call Stackalt bölmeyi inceleyin
6. Çağrı yığınının olabildiğince aşağısında, bir rendergiriş olmalı , buReactDOM.render
7. Aşağıdaki satırı tıklayın render, yani. render'ı çağıran kod
8. Ortadaki bölme artık ECMAScript'i vurgulanmış .render içeren bir ifadeyle görüntülüyor
9. Oluşturmayı çağırmak için kullanılan nesnenin üzerine fare imlecini getirin. react-domModül ihracat nesne
   1. kod satırı şöyle olursa: Object (u.render) (… , u'nun üzerine gelin
10. version: "15.6.2"Örn. İçeren bir araç ipucu penceresi görüntülenir . tarafından ihraç edilen tüm değerlerreact-dom

Sürüm ayrıca React geliştirme araçlarına da eklenmiş, ancak bildiğim kadarıyla hiçbir yerde gösterilmiyor.

Konsolu açın, ardından çalıştırın window.React.version.

Bu, 0.12.2'den 16.2.0'a yükseltme yaparken Safari ve Chrome'da benim için çalıştı.

İndex.js dosyasında, Uygulama bileşenini "React.version" ile değiştirmeniz yeterlidir . Örneğin

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

Bunu React v16.8.1 ile kontrol ettim

Create-react-app ile oluşturulan bir uygulama için sürümünü görmeyi başardım:

1. Chrome Geliştirme Araçları / Firefox Geliştirici Araçlarını açın,
2. XXXXXXXX'in bir derleme hash olduğu / farklı olabileceği main.XXXXXXXX.js dosyasını arayın ve açın,
3. İsteğe bağlı: Biçimlendirilmiş kaynağı göstermek için {} öğesini tıklayarak kaynağı biçimlendirin,
4. React-dom için kaynak içinde metin olarak arayın,
5. Chrome'da bulundu: "react-dom": "^ 16.4.0",
6. Firefox'ta bulundu: 'react-dom': '^ 16.4.0'

Uygulama, kaynak haritası olmadan dağıtıldı.

Mevcut bir projede React sürümünü görmenin basit bir yolu render, herhangi bir bileşenin bir yöntemine gidip şunu eklemektir:

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

Bu, React'i şu şekilde içe aktardığınızı varsayar: import React from 'react'

Öncelikle kurulu değilse React geliştirme araçlarını yükleyin ve ardından tarayıcı konsolunda aşağıdaki kodu çalıştırın:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version