在執行時檢查 React App 的版本

1. 瞭解 React 版本的好處
2. 在執行時使用 React DevTools 檢查 React 版本
3. 在沒有 DevTools 的情況下檢查 React 版本

在 React 中開發前端應用程式時，包版本是一個重要因素。該框架在不斷髮展，正在引入新功能。

瞭解 React 包的確切版本對於編寫沒有錯誤的 Web 應用程式很重要。

瞭解 React 版本的好處

某些功能僅在框架的更高版本中引入。例如，從 React 版本 16.8 開始，鉤子可用於功能元件。

如果在不可用的元件中使用鉤子，則會出現錯誤。

瞭解版本之間的差異也很重要。有時你正在重寫遺留程式碼以包含 React 中的最新功能。

本文探討了如何在執行應用程式時找出 React 包的版本。控制檯是 Web 開發的有用工具，它通常也用於在執行時查詢框架的版本。

在執行時使用 React DevTools 檢查 React 版本

React DevTools 是任何 React 開發人員工具包的重要組成部分。安裝後，你可以通過開啟控制檯並輸入以下程式碼來檢查 React 包的版本。

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next()["value"]["version"]

此命令將返回你的 React Web 應用程式的版本。讓我們看一個實際的例子。

在沒有 DevTools 的情況下檢查 React 版本

檢查 React 包版本的另一種方法是通過匯入的 React 模組本身。

React 是構建 Web 應用程式所必需的核心庫。一旦你在環境中安裝了它，通常你應該像下面這樣匯入庫。

import React from "react";

讓我們看一個示例，說明如何在我們的應用程式執行時獲取 React 模組的版本。

import React from "react";
export default function App() {
  console.log(React.version);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
    </div>
  );
}

React.version 值將在讀取時返回當前執行的 React 應用程式版本。由於它的位置，它會在每次渲染 App 元件時執行。

這是 CodeSandbox 上的演示。如果我們檢查應用程式的控制檯，我們會看到那裡的值與當前安裝的 React 版本相匹配。

或者，你可以將 React.version 值放在 <h1> 的開始標籤和結束標籤之間。讓我們看一個例子。

import React from "react";
export default function App() {
  console.log(React.version)
  return (
    <div className="App">
      <h1>{React.version}</h1>
    </div>
  );
}

在這裡，我們使用插值括號，它允許我們告訴 JSX 將它們之間的表示式解釋為有效的 JavaScript。