เราจะบอกเวอร์ชันของ 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 ไม่จำเป็นต้องแสดงถึงปฏิกิริยา ดังนั้นดูใน. js

วิธีที่ 1: ดูใน ECMAScript:

หมายเลขเวอร์ชันถูกส่งออกโดยทั้งสองโมดูลreact-domและตอบสนองแต่ชื่อเหล่านั้นมักจะถูกลบออกโดยการรวมกลุ่มและเวอร์ชันที่ซ่อนอยู่ในบริบทการดำเนินการที่ไม่สามารถเข้าถึงได้ จุดพักที่ชาญฉลาดอาจเปิดเผยค่าโดยตรงหรือคุณสามารถค้นหา ECMAScript:

1. โหลดหน้าเว็บ (คุณสามารถลองhttps://www.instagram.comเป็น Coolaiders ทั้งหมด)
2. เปิด Chrome Developer Tools บนแท็บ Sources (control + shift + i หรือ command + shift + i)
   1. เครื่องมือ Dev เปิดบนแท็บ Sources
3. ที่ด้านขวาสุดของแถบเมนูด้านบนคลิกจุดไข่ปลาแนวตั้งแล้วเลือกค้นหาไฟล์ทั้งหมด
4. ในช่องค้นหาทางซ้ายพิมพ์FIRED เป็นตัวพิมพ์ใหญ่ให้ล้างช่องทำเครื่องหมายละเว้นตัวพิมพ์พิมพ์Enter
   1. รายการที่ตรงกันอย่างน้อยหนึ่งรายการจะปรากฏด้านล่าง เวอร์ชันนี้เป็นการส่งออกที่ใกล้กับสตริงการค้นหาซึ่งมีลักษณะคล้ายเวอร์ชัน: "16.0.0"
5. หากมองไม่เห็นหมายเลขเวอร์ชันทันทีให้ดับเบิลคลิกที่บรรทัดที่ขึ้นต้นด้วยหมายเลขบรรทัด
   1. ECMAScript ปรากฏในบานหน้าต่างตรงกลาง
6. หากมองไม่เห็นหมายเลขเวอร์ชันในทันทีให้คลิกวงเล็บปีกกาสองอันที่ด้านล่างซ้ายของบานหน้าต่าง ECMAScript {}
   1. ECMAScript ได้รับการจัดรูปแบบใหม่และอ่านง่ายขึ้น
7. หากมองไม่เห็นหมายเลขเวอร์ชันในทันทีให้เลื่อนขึ้นและลงสองสามบรรทัดเพื่อค้นหาหรือลองใช้แป้นค้นหาอื่น
   1. หากโค้ดไม่ได้ถูกย่อขนาดให้ค้นหาReactVersion ควรมี 2 Hit ที่มีค่าเท่ากัน
   2. หากโค้ดถูกลดขนาดให้ค้นหาSECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIREDหรือreact-dom
   3. หรือค้นหาสตริงเวอร์ชันที่น่าจะเป็น: "15.หรือ" 16 หรือแม้แต่"0.15

วิธีที่ 2: ใช้เบรกพอยต์ DOM:

1. โหลดหน้าที่แสดงผลโดย React
2. คลิกขวาที่องค์ประกอบการตอบสนอง (อะไรก็ได้เช่นช่องป้อนข้อมูลหรือกล่อง) แล้วเลือก Inspect Element
   1. เครื่องมือสำหรับนักพัฒนา Chrome จะแสดงElementsบานหน้าต่าง
3. ในแผนภูมิให้สูงที่สุดเท่าที่จะเป็นไปได้จากองค์ประกอบที่เลือก แต่ไม่สูงกว่าองค์ประกอบ React root (มักจะเป็น div โดยตรงภายใน body ที่มี id root: <div id = "root"> ) ให้คลิกขวาที่องค์ประกอบแล้วเลือกBreak On… - subtree modifications
   1. หมายเหตุ: เป็นไปได้ที่จะเปรียบเทียบเนื้อหาของแท็บ Elements (สถานะปัจจุบันของ DOM) กับการตอบสนองสำหรับทรัพยากรเดียวกันบนแท็บเครือข่าย สิ่งนี้อาจเปิดเผยองค์ประกอบรากของ React
4. โหลดหน้านี้ซ้ำโดยคลิกโหลดซ้ำทางซ้ายของแถบที่อยู่
   1. เครื่องมือสำหรับนักพัฒนา Chrome จะหยุดที่จุดพักและแสดงSourcesบานหน้าต่าง
5. ในบานหน้าต่างด้านขวาสุดให้ตรวจสอบCall Stackบานหน้าต่างย่อย
6. เท่าที่จะเป็นไปได้ที่ call stack ควรมีrenderรายการนี่คือReactDOM.render
7. คลิกบรรทัดด้านล่างrenderเช่น. รหัสที่เรียกใช้การแสดงผล
8. ขณะนี้บานหน้าต่างตรงกลางจะแสดง ECMAScript พร้อมกับนิพจน์ที่มี. render ที่ไฮไลต์
9. วางเคอร์เซอร์ของเมาส์ไว้เหนือวัตถุที่ใช้เรียกการเรนเดอร์คือ react-domวัตถุส่งออกโมดูล
   1. ถ้าบรรทัดรหัสไป: Object (u.render) (… , วางเมาส์เหนือu
10. หน้าต่างเคล็ดลับเครื่องมือจะแสดงที่มีversion: "15.6.2"คือ ค่าทั้งหมดที่ส่งออกโดยreact-dom

เวอร์ชันนี้ยังถูกฉีดเข้าไปในเครื่องมือ React dev แต่เท่าที่ฉันรู้ว่าไม่แสดงที่ใดก็ได้

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-react-appฉันจัดการเพื่อดูเวอร์ชัน:

1. เปิด Chrome Dev Tools / Firefox Dev Tools
2. ค้นหาและเปิดไฟล์ main.XXXXXXXX.js โดยที่ XXXXXXXX เป็นแฮชบิลด์ / อาจแตกต่างกัน
3. ทางเลือก: จัดรูปแบบแหล่งที่มาโดยคลิกที่ {} เพื่อแสดงแหล่งที่มาที่จัดรูปแบบ
4. ค้นหาเป็นข้อความภายในซอร์สสำหรับ react-dom
5. พบใน Chrome: "react-dom": "^ 16.4.0",
6. พบใน Firefox: 'react-dom': '^ 16.4.0'

แอปถูกปรับใช้โดยไม่มีแผนที่ต้นทาง

ในโปรเจ็กต์ที่มีอยู่วิธีง่ายๆในการดูเวอร์ชัน React คือไปที่renderเมธอดของส่วนประกอบใด ๆ และเพิ่ม:

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

สิ่งนี้จะถือว่าคุณนำเข้า React ดังนี้: import React from 'react'

ขั้นแรกให้ติดตั้งเครื่องมือ React dev หากไม่ได้ติดตั้งจากนั้นใช้รันโค้ดด้านล่างในคอนโซลเบราว์เซอร์:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

จากบรรทัดคำสั่งเพื่อดูเวอร์ชันการตอบสนองเวอร์ชันการตอบสนองของมุมมอง npm