如何查看react的版本号

方法一：通过 package.json 查看（静态查看）

1. 打开项目根目录下的 package.json 文件
2. 在 dependencies 或 devDependencies 字段中查找 react 和 react-dom 的版本号：

   {
     "dependencies": {
       "react": "^18.2.0",     // React 核心库版本
       "react-dom": "^18.2.0"  // React DOM 渲染器版本
     }
   }
   

   特点：
   ✅ 直接查看项目配置的预期版本
   ⚠️ 实际安装版本可能因锁文件（package-lock.json/yarn.lock）略有不同

方法二：通过命令行查看（动态验证）

使用 npm 或 yarn：

# 查看项目中实际安装的 React 版本
npm list react       # 本地项目版本
npm list -g react    # 全局安装版本（通常 React 不全局安装）

# 使用 yarn
yarn list react

输出示例：

my-react-app@0.1.0 /path/to/project
└── react@18.2.0 

特点：
✅ 精准显示实际安装版本
⚠️ 需在项目根目录执行（确保存在 node_modules）

方法三：在代码中动态打印版本

在 React 组件文件中添加以下代码：

import React from 'react';

console.log('React Version:', React.version);

function App() {
  return <div>Check console for React version</div>;
}

export default App;

运行结果：
在浏览器控制台中会输出类似：

React Version: 18.2.0

特点：
✅ 验证运行时实际使用的 React 版本
⚠️ 需确保 React 已正确引入且项目处于开发模式

方法四：通过浏览器开发者工具

1. 打开浏览器的 开发者工具（F12）
2. 切换到 Console 标签页
3. 输入以下命令并回车：

   React.version
   

特点：
✅ 直接查看当前页面使用的 React 版本
⚠️ 仅适用于开发环境（生产环境可能无法访问 React 全局对象）

版本查看场景对比

常见问题

1. 为什么 package.json 和 npm list 显示的版本不一致？

   • 可能未执行 npm install 更新依赖
   • 版本号使用了语义化版本符号（如 ^18.2.0 允许安装 18.x.x 的最新版本）

2. 如何升级 React 版本？

   npm install react@latest react-dom@latest
   # 或指定版本
   npm install react@18.2.0 react-dom@18.2.0
   

3. 全局安装了 React，为什么项目中没有生效？

   • React 必须作为项目本地依赖安装，全局安装仅用于命令行工具（如 create-react-app）

通过以上方法，您可以快速确认 React 版本，确保开发环境与依赖的一致性。