Làm cách nào để biết phiên bản React đang chạy trong thời gian chạy trên trình duyệt?

Có cách nào để biết phiên bản thời gian chạy của React trong trình duyệt không?

React.version là những gì bạn đang tìm kiếm.

Tuy nhiên, nó không có giấy tờ (theo như tôi biết) vì vậy nó có thể không phải là một tính năng ổn định (tức là mặc dù không chắc, nó có thể biến mất hoặc thay đổi trong các bản phát hành trong tương lai).

Ví dụ với Reactnhập dưới dạng tập lệnh

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>

Ví dụ với Reactnhập dưới dạng mô-đun

import React from 'react';

console.log(React.version);

Rõ ràng, nếu bạn nhập Reactdưới dạng mô-đun, nó sẽ không nằm trong phạm vi toàn cầu. Đoạn mã trên được thiết kế để được đi kèm với phần còn lại của ứng dụng của bạn, ví dụ như sử dụng webpack . Nó sẽ hầu như không bao giờ hoạt động nếu được sử dụng trong bảng điều khiển của trình duyệt (nó đang sử dụng đầu vào trống).

Cách tiếp cận thứ hai này là cách được khuyến nghị. Hầu hết các trang web sẽ sử dụng nó. create-react-app thực hiện điều này (nó sử dụng webpack đằng sau cảnh). Trong trường hợp này, Reactđược đóng gói và thường không thể truy cập được bên ngoài gói (ví dụ: trong bảng điều khiển của trình duyệt).

Từ dòng lệnh:

npm view react version
npm view react-native version

Mở Chrome Dev Tools hoặc tương đương và chạy require('React').versiontrong bảng điều khiển.

Điều đó cũng hoạt động trên các trang web như Facebook để tìm hiểu phiên bản họ đang sử dụng.

Với React Devtools được cài đặt, bạn có thể chạy điều này từ bảng điều khiển của trình duyệt:

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

Kết quả đầu ra như sau:

react-dom: 16.12.0

Không chắc chắn rằng bất kỳ biến ECMAScript toàn cầu nào đã được xuất và html / css không nhất thiết chỉ ra React. Vì vậy, hãy tìm trong .js.

Phương pháp 1: Tìm trong ECMAScript:

Số phiên bản được xuất bởi cả hai mô-đun react-dom và react nhưng những tên đó thường bị loại bỏ bằng cách gói và phiên bản ẩn bên trong ngữ cảnh thực thi không thể truy cập được. Một điểm ngắt thông minh có thể tiết lộ trực tiếp giá trị hoặc bạn có thể tìm kiếm trong ECMAScript:

1. Tải trang Web (bạn có thể thử https://www.instagram.com, họ là những người tổng cộng)
2. Mở Công cụ dành cho nhà phát triển Chrome trên tab Nguồn (control + shift + i hoặc command + shift + i)
   1. Công cụ phát triển mở trên tab Nguồn
3. Ở bên phải của thanh menu trên cùng, nhấp vào dấu chấm lửng dọc và chọn tìm kiếm tất cả các tệp
4. Trong hộp tìm kiếm bên trái, gõ chữ CHỮ IN HOA, bỏ chọn hộp kiểm Bỏ qua chữ hoa , gõ Enter
   1. Một hoặc nhiều kết quả phù hợp xuất hiện bên dưới. Phiên bản là một bản xuất rất gần với chuỗi tìm kiếm trông giống như phiên bản: "16.0.0"
5. Nếu số phiên bản không hiển thị ngay lập tức: hãy nhấp đúp vào dòng bắt đầu bằng số dòng
   1. ECMAScript xuất hiện trong ngăn giữa
6. Nếu số phiên bản không hiển thị ngay lập tức: hãy nhấp vào hai dấu ngoặc nhọn ở dưới cùng bên trái của ngăn ECMAScript {}
   1. ECMAScript được định dạng lại và dễ đọc hơn
7. Nếu số phiên bản không hiển thị ngay lập tức: hãy cuộn lên và xuống một vài dòng để tìm hoặc thử một phím tìm kiếm khác
   1. Nếu mã không được rút gọn , hãy tìm kiếm ReactVersion. Sẽ có 2 lần truy cập có cùng giá trị
   2. Nếu mã được rút gọn , hãy tìm kiếm SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED hoặc -dom
   3. Hoặc tìm kiếm chính chuỗi phiên bản có thể có: "15. hoặc " 16. hoặc thậm chí "0,15

Phương pháp 2: Sử dụng điểm ngắt DOM:

1. Tải trang được hiển thị bởi React
2. Nhấp chuột phải vào phần tử React (bất kỳ thứ gì, như trường nhập hoặc hộp) và chọn Inspect Element
   1. Công cụ nhà phát triển Chrome hiển thị Elementsngăn
3. Càng lên cao trong cây càng tốt từ phần tử đã chọn, nhưng không cao hơn phần tử gốc React (thường là div trực tiếp bên trong nội dung có id root: <div id = "root"> ), nhấp chuột phải vào một phần tử và chọnBreak On… - subtree modifications
   1. Lưu ý: Có thể so sánh nội dung của tab Phần tử (trạng thái hiện tại của DOM) với phản hồi cho cùng một nguồn tài nguyên trên tab Mạng. Điều này có thể tiết lộ phần tử gốc của React
4. Tải lại trang bằng cách nhấp vào Tải lại bên trái của thanh địa chỉ
   1. Công cụ nhà phát triển Chrome dừng tại điểm ngắt và hiển thị Sourcesngăn
5. Trong ngăn ngoài cùng bên phải, kiểm tra ngăn Call Stackphụ
6. Càng xuống dưới ngăn xếp cuộc gọi càng tốt, nên có một rendermục nhập, đây làReactDOM.render
7. Nhấp vào dòng bên dưới render, tức là. mã gọi kết xuất
8. Khung ở giữa hiện hiển thị ECMAScript với biểu thức chứa .render đánh dấu
9. Di con trỏ chuột qua đối tượng được sử dụng để gọi kết xuất, là. cácreact-dom đối tượng xuất khẩu mô-đun
   1. nếu dòng mã đi: Object (u.render) (… , hãy di chuột qua u
10. Một cửa sổ chú giải công cụ được hiển thị có chứa version: "15.6.2", nghĩa là. tất cả các giá trị được xuất bởireact-dom

Phiên bản này cũng được đưa vào các công cụ dành cho nhà phát triển React, nhưng theo như tôi biết thì không được hiển thị ở đâu.

Mở bảng điều khiển, sau đó chạy window.React.version .

Điều này đã làm việc cho tôi trong Safari và Chrome khi nâng cấp từ 0.12.2 lên 16.2.0.

Trong tệp index.js, chỉ cần thay thế Thành phần ứng dụng bằng "React.version". Ví dụ

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

Tôi đã kiểm tra điều này với React v16.8.1

Đối với một ứng dụng được tạo bằng create-react-app, tôi đã quản lý để xem phiên bản:

1. Mở Chrome Dev Tools / Firefox Dev Tools,
2. Tìm kiếm và mở tệp main.XXXXXXXX.js trong đó XXXXXXXX là một băm xây dựng / có thể khác,
3. Tùy chọn: định dạng nguồn bằng cách nhấp vào {} để hiển thị nguồn được định dạng,
4. Tìm kiếm dưới dạng văn bản bên trong nguồn cho react-dom,
5. trong Chrome được tìm thấy: "react-dom": "^ 16.4.0",
6. trong Firefox đã được tìm thấy: 'react-dom': '^ 16.4.0'

Ứng dụng đã được triển khai mà không có bản đồ nguồn.

Trong một dự án hiện có, một cách đơn giản để xem phiên bản React là đi tới một renderphương thức của bất kỳ thành phần nào và thêm:

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

Điều này giả sử bạn nhập React như thế này: import React from 'react'

Đầu tiên hãy cài đặt các công cụ dành cho nhà phát triển React nếu chưa được cài đặt và sau đó sử dụng đoạn mã chạy bên dưới trong bảng điều khiển trình duyệt:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version