Hello World

# React 19 官方最新稳定版 简介 与 项目创建

TIP

本章是 React 学习的起点，将带你从零开始认识 React 并搭建第一个 React 项目。通过本章的学习，你将掌握以下内容：

  • 学习 React 需要具备哪些基础知识
  • 为什么要学习 React：通过原生 JS 与 React 的对比，理解 React 在 DOM 操作、数据驱动视图、性能优化和组件化开发方面的核心优势
  • React 简介与发展史：了解 React 是什么、React 库与 React 框架的区别，以及 React 从诞生至今的发展历程
  • Vite 构建 React 项目：学会使用 Vite 脚手架快速创建 React 项目，熟悉项目的目录结构、配置文件及启动流程
  • 命令式与声明式编程：理解两种编程范式的区别，掌握 React 声明式编程的核心思想与优势

# 一、学习 React 需要具备哪些基础知识

TIP

学习 React 之前，你需要具备以下基础知识：

  • 熟练掌握 HTML5 + CSS3
  • 熟练掌握 JavaScript + ES6 （核心逻辑，尤其是数组方法、箭头函数、解构、模块化、Promise）
  • HTTP协议 + Axios 网络请求
  • 了解 Node.js 中的 npm 包管理工具
  • Vite 构建工具 （了解Vite 构建项目流程）

如果你具备了以上基础，那你就可以正式进入 React 框架的学习了。

# 二、为什么要学习 React 框架

TIP

在学习 React 框架前，我们必须搞懂一个问题：为什么需要学习 React 框架？

难道没有 React 框架，仅凭我们前面学习过的 HTML5+CSS3+JS+HTTP 协议+Ajax（或 fetch），不能与后端配合开发一个完整的 Web 应用吗？

答案显然是 可以的

那为什么我们还需要学习 React 框架呢？接下来，我们就从 "没有 React" 和 "有了 React" 两种方式的对比来回答这个问题。

# 1、没有 React 框架，我们是怎么开发的？

TIP

在没有 React 框架的情况下，我们配合后端开发一个 Web 应用，典型的工作流程是：

  • 1、编写页面：用 HTML + CSS 构建页面结构和样式
  • 2、请求数据：通过 Ajax（或 fetch）向后端 API 发送请求，获取 JSON 数据
  • 3、手动操作 DOM 渲染数据：拿到数据后，用 JS 手动操作 DOM（document.getElementById、innerHTML等），将数据渲染到页面中
  • 4、手动同步数据与视图：当用户操作导致数据变化时（如点击按钮、输入内容），需要手动找到对应的 DOM 节点，更新它的内容或状态

一句话总结： 开发者既要关心"数据是什么"，又要关心"DOM 怎么改"，两头都得管。

# 1.1、示例：一个待办事项列表

<div id="app">
    <h2>待办事项</h2>
    <button id="addBtn">添加</button>
    <ul id="taskList"></ul>
</div>

<script>
    // 模拟数据，正常是要axios 或 fetch 发请求给后端获取初始数据
    const tasks = [
        {
            id: 1,
            text: "学习React",
        },
        {
            id: 2,
            text: "健身1小时",
        },
    ];

    // 获取 DOM
    const taskList = document.getElementById("taskList");
    const taskInput = document.getElementById("taskInput");
    const addBtn = document.getElementById("addBtn");
    let html = ""; // 用于拼接列表字符串
    renderList();
    // 渲染列表
    function renderList() {
        // 每次清空列表
        html = "";
        tasks.forEach((item) => {
            html += `<li>${item.text}</li>`;
        });
        taskList.innerHTML = html;
    }

    // 添加一条新任务
    addBtn.addEventListener("click", () => {
        // 获取输入的值
        const value = taskInput.value.trim();
        if (value) {
            tasks.push({ id: tasks.length, text: value });
        }
        // 手动重新渲染任务列表
        renderList();
    });
</script>

GIF2026-4-1221-58-40

传统方式开发的缺点

  • 直接使用 DOM API 操作界面，代码繁琐，效率较低
  • 数据变化后，需要手动查找 DOM 元素并更新内容，容易遗漏或出错，维护成本高
  • 频繁操作 DOM 会导致页面频繁重绘与重排，性能较差。（每次数据更新，整个 ul 列表全部重建
  • 缺乏组件化机制，代码难以复用，相同功能只能复制粘贴。（ 如果需要两个地方渲染任务列表，只能手动复制代码）

# 2、有了 React 框架，开发方式有什么不同？

TIP

有了 React 框架后，开发流程变成了：

  • 1、编写页面：用 JSX（书写像 HTML一样）+ CSS 描述页面"长什么样"
  • 2、请求数据：同样通过 Ajax（或 fetch）向后端请求数据
  • 3、只管数据，不管 DOM：拿到数据后，只需要把数据交给 React，React 自动将数据渲染到页面中。当数据变化时，React 自动计算出哪些地方需要更新，并高效地更新对应的 DOM

一句话总结： 开发者只需要关心"数据是什么"，DOM 怎么改交给 React 自动处理。

# 2.1、示例：一个待办事项列表

import { useState } from "react";
// import List from "./components/List.jsx";

export default function App() {
    // 模拟初始任务列表数据，正常发请求获取
    const [tasks, setTasks] = useState([
        {
            id: 1,
            text: "学习React",
        },
        {
            id: 2,
            text: "健身1小时",
        },
    ]);

    const addTask = () => {
        setTasks([...tasks, { id: tasks.length + 1, text: "看电影" }]);
    };

    return (
        <div>
            <h2>待办事项</h2>
            <button onClick={addTask}>添加</button>
           {/* <List tasks={tasks} /> */}
            <ul>
                {tasks.map((task) => (
                    <li key={task.id}>{task.text}</li>
                ))}
            </ul>
        </div>
    );
}


// 可以将 ul 抽出去做成  UI 组件复用
export default function List({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

GIF2026-4-1221-55-48

React 框架开发的优点

  • 开发者只需描述 UI 与数据的关系（声明式编程），无需手动操作 DOM，代码更直观、简洁。
  • 开发者只需关注数据状态，数据变化后，框架自动更新 UI。
  • 基于虚拟 DOM 与 Diff 算法，计算最小更新集，批量更新真实 DOM，自动优化渲染性能。（新增数据时，只会在后面添加一个 li 不会重新渲染整个 ul ）
  • 将 UI 拆分为独立、可复用的组件，轻松实现界面逻辑的复用。（ 如果）

# 3、总结：React 框架的优势

对比维度 原生 JS React 框架
DOM 操作 直接使用 DOM API 操作界面，代码繁琐，效率较低 开发者只需描述 UI 与数据的关系（声明式编程），无需手动操作 DOM，代码直观、简洁
更新机制 数据变化后需手动查找 DOM 并更新，易遗漏或出错，维护成本高 只需关注数据状态，框架自动更新 UI
性能优化 频繁操作 DOM 导致页面频繁重绘与重排，性能较差 基于虚拟 DOM + Diff 算法，计算最小更新集，批量更新，性能高
UI 复用 缺乏组件化机制，代码难以复用，相同功能只能复制粘贴 将 UI 拆分为独立、可复用的组件，轻松实现逻辑复用

React 五大核心特点

特点 说明
声明式编程 描述 UI 最终状态，由框架处理变化过程
组件化开发 UI 拆分为独立组件，高内聚低耦合
高效的性能 虚拟 DOM + Diff 算法，减少真实 DOM 操作
响应式数据 数据变化自动触发视图更新
跨平台开发 使用 React Native 可开发 iOS 和 Android 原生应用

# 4、总结

TIP

  • 没有 React 框架，你当然可以用 HTML5+CSS3+JS+Ajax 与后端配合开发 Web 应用，但你需要花费大量时间在手动 DOM 操作和数据与视图的同步上，随着项目复杂度的增加，代码会变得越来越难以维护。

  • 有了 React 框架，你只需要关注数据本身，告诉 React 界面"长什么样"，React 会自动、高效地帮你完成 DOM 的更新。这样，你就可以把更多的精力放在业务逻辑上，而不是繁琐的 DOM 操作上。

这就是我们要学习 React 框架的原因——它解放了我们的生产力，让前端开发更高效、更优雅、更易维护。

# 5、前端三大主流框架

TIP

Vue、React、Angular 它们是目前前端开发中最流行的三个框架/库，各有特点:

React

  • 由 Facebook 开发维护
  • 本质是 UI 库（不是完整框架）
  • 特点：虚拟DOM、JSX 语法、单向数据流
  • 生态丰富，需要搭配路由、状态管理等库（如 React Router、Redux）
  • 适合：中大型项目、需要高度灵活性的场景

Vue

  • 由 尤雨溪 创建
  • 渐进式框架（可逐步引入）
  • 特点：模板语法简洁、双向数据绑定、组合式 API
  • 官方生态完善（Vue Router、Pinia/Vuex）
  • 适合：中小型项目到大型项目，学习曲线相对平缓

Angular

  • 由 Google 开发维护
  • 完整的 MVC 框架（开箱即用）
  • 特点：TypeScript 编写、依赖注入、RxJS 响应式编程、指令系统
  • 包含路由、HTTP 客户端、表单处理等内置功能
  • 适合：大型企业级应用，学习曲线较陡

# 5.1、简单对比

特性 React Vue Angular
类型 库 渐进式框架 完整框架
学习难度 中等 较低 较高
性能 优秀 优秀 优秀
国内流行度 高 很高 中等
国外流行度 很高 中等 高

国内流行度对比

在国内，很多初学者会先学 Vue，因为上手快、中文生态好、中小公司岗位多，能比较快地找到第一份工作。

有了 Vue 的基础后，再学 React 会轻松不少（组件化、工程化思想相通），所以工作后再补 React 是性价比很高的选择。 目前国内 Vue 开发者数量确实更多，但中大型公司、复杂项目往往更倾向 React。

“Vue + React 都会” 的人在求职和团队协作中确实更有优势，尤其是当你需要跨项目支持或晋升高阶岗位时。

总结：Vue 帮你快速入行，React 帮你走得更远。两者都会，上限更高。

# 三、React 简介与发展史

TIP

深入浅出 React 框架的前世今生，带你快速入门 React 开发。

# 1、React 是什么

TIP

React 是一个用于构建 Web 和原生应用界面的 JavaScript 库，由 Facebook 开发并维护。它采用声明式、组件化的编程模型，让 UI 开发更高效、可维护。

  • React 中文官网：https://zh-hans.react.dev (opens new window)
  • React 英文官网：https://react.dev (opens new window)
  • Web 应用界面：指在浏览器里运行的 HTML/CSS/JS 界面（如网页、管理后台）。简单来说，你可以用 React 来创建网页项目。
  • 原生应用界面：指在手机上运行的 App 界面。通过 React Native 框架，你可以用相同的 JavaScript 和 React 组件来构建 iOS 和 Android 原生应用，无需分别学习两套原生开发语言。
  • 库：库（Library）是一组预写好的代码集合，用于帮助开发者完成特定任务。React 库就是用 JavaScript 编写的一套专门用来构建和管理 UI 的工具函数。

关于什么是声明式、组件化的编程模型，我们后面再给大家介绍。

# 2、React 库 与 React 框架的区别

TIP

我们先用一个比喻来理解库和框架的区别：

  • 库（Library）就像一个工具箱。你需要锤子就拿锤子，需要扳手就拿扳手，用什么、怎么用完全由你决定。
  • 框架（Framework）就像一个毛坯装房。房子的结构、水电走线都已经规划好了，你只需要按照它的规范来添置家具和装饰。

React 本身只是一个专注于构建 UI 的库，它只负责"怎么把界面画出来"这一件事。所以严格来说，React 是一个库，而不是框架。

那我们为什么总说 "学 React 框架" 呢 ？

因为光靠 React 库本身，是无法完成一个真正的项目的。一个完整的项目还需要：

能力 对应工具
项目搭建 Vite 脚手架
页面跳转 React Router（路由）
数据共享 Redux / Zustand（状态管理）
接口请求 Axios（数据获取）
界面美化 Ant Design / Element Plus（UI 组件库）

注：

所以，我们常说的 "React 框架" 并不是指 React 库本身，而是指以 React 库为核心，搭配路由、状态管理、数据获取、UI 组件库等工具，通过脚手架搭建起来的一整套前端开发环境。

# 3、React 作者与发展史

TIP

  • 2011 年：Jordan Walke（Facebook工程师）创建了React的最初版本，名为“FaxJS”
  • 2012 年：Tom Occhino将React从“FaxJS”改名为“React”
  • 2013 年：Facebook决定将React开源，使其能够被更广泛的开发者使用和贡献
  • 2015 年：Facebook发布了React Native，这是一个使用 React 构建原生移动应用的框架。React Native的发布使得开发者可以使用React的编程模型和技术来构建跨平台的移动应用，从而大大简化了移动应用的开发过程。
  • 2016 年：React成为主流的开发框架，被越来越多的开发者所采纳和使用。
  • 2017 年：React团队开始着手解决性能问题，并开始了数年的重构工作。这一年，React引入了Fiber架构，为后续的性能优化打下了基础。
  • 2019 年：Sophie Alpert 和 Dan Abramov 在 2018 年 React Conf 上首次公开介绍了 Hooks，这是一种替代 Class 组件的函数式解决方案。Hooks 的引入提供了更简单、更具可重用性的代码编写方式，进一步提升了 React 的开发效率。2019 年 2 月发布了 React 16.8 版本，正式支持 Hooks。
  • 2020 年：React 17 正式发布（2020年10月20日）。这是一个“渐进式”的过渡版本，没有引入重大新特性，主要为后续的并发渲染做铺垫。主要改进包括：事件委托重构（从绑定到 document 改为绑定到 root 节点，提升微前端兼容性）、新 JSX 转换（无需再手动 import React）。
  • 2022 年：2022年3月29日发布了 React 18 版本。这是 React 发展史上的里程碑式更新，核心引入了并发渲染（Concurrent Rendering）——一种可中断、可恢复的渲染机制。
  • 2024 年：2024年12月5日发布了 React 19 版本。这是 React 在并发模式基础上的又一次重大升级，标志着 React 正从 UI 库向全栈开发框架演进。
    • Actions：统一处理异步状态，自动管理 pending、error 等状态，简化表单和数据提交逻辑
    • React Compiler（曾用名 React Forget）：自动对组件进行 useMemo 和 useCallback 级别的性能优化，大幅减少手动优化的代码量
    • Server Components（稳定版） ：服务端组件在 React 19 中正式稳定，支持组件在服务端渲染后发送给客户端，减少客户端 bundle 体积
    • 内置元数据管理：可直接在组件中编写 <title>、<meta> 等标签，无需第三方库
    • ref 作为 prop：不再需要 forwardRef，ref 可直接作为组件 prop 传递
  • 2025年及以后：React 19 发布后持续迭代，截至目前最新稳定版为 19.2.4（2026年1月26日发布）

# 四、Vite 构建 React 项目

TIP

在开始之前，我们先简单了解一下为什么要选择 Vite 作为 React 项目的构建工具。

传统构建工具的问题

早期的 React 项目通常使用 Create React App 来初始化，但随着项目规模的增长，CRA 暴露出一些问题：

  • 启动慢：项目越大，开发服务器启动时间越长
  • 热更新慢：修改代码后的热更新需要等待几秒甚至更久
  • 依赖重：需要预先打包整个应用，消耗大量内存

# 1、Vite 的优势

Vite（法语意为"快速"）是一个新一代的前端构建工具，由 Vue.js 作者尤雨溪开发

它通过以下方式解决了传统工具的问题：

特性 说明
⚡ 极速启动 利用浏览器原生 ES Module 支持，无需打包即可启动
🔥 快速热更新 基于 ESM 的 HMR，修改代码后即时生效
📦 按需编译 只编译当前页面需要的模块，大型项目依然快速
🛠️ 开箱即用 支持 TypeScript、JSX、CSS 预处理器等常见需求

如果对于 vite 工具不了解的同学，可以看我讲过的 Vite 教程学习

# 2、Vite 构建项目的前置要求

使用 Vite 创建 React 应用，需要有 Node.js 环境，版本需要 18+ 或 20+。部分模板需要更高版本的 Node.js，当包管理器发出警告时，请注意升级你的 Node 版本。

在 vscode 命令终端，执行以下命令检查 Node.js 版本

# 检查 Node.js 版本
node -v
# 建议输出：v18.x.x 或 v20.x.x

# 3、使用 Vite 创建 React 项目

以下官方给出的利用 vite 创建 React 项目的命令 (opens new window)，这个命令是一步到位，指定项目名、框架、语言

# my-app  项目名
# --template react-ts 指定项目采用 react 框架 + TypeScript 语言
npm create vite@latest my-app -- --template react-ts

作为初学者，我们一开始不采用 TS来编写，我们可以选择以下方式创建 React 项目，这样我们可以根据自己的需要选择。

# 3.1、第一步

执行以下 npm 命令，使用 Vite 脚手架创建项目

npm create vite@latest   # 使用Vite脚手架创建项目

# 3.2、第二步

以上命令执行后，然后按交互提示选择

  • 项目名 : my-app
  • 框架：React
  • 变体（语言）：JavaScript 或 TypeScript

image-20260408122111176

# 3.3、第三步

项目创建好后，会在命令行显示项目的访问地址，如下图

image-20260408122332294

按住 Ctrl + 点击网址 即可在浏览器中打开项目，显示效果如下：

image-20260408122529543

到这一步，你成功的利用 Vite 创建了 React 项目。

如果你后续想要退出项目然后再重启项目，可以按步骤 4 和 5 操作

# 3.4、第四步

按住 Ctrl + C 退出当前项目

image-20260408131338456

# 3.5、第五步

执行以下命令，进入 React 项目根目录，然后在开发环境下启动 React 项目

cd my-app    # 进入创建好的 React 项目根目录
npm run dev	 # 开发环境下启动 React 项目

image-20260408131523709

npm run dev执行后，在命令行显示项目的访问地址

image-20240407184843478

按住 Ctrl + 点击 即可在浏览器中打开项目，显示效果如下：

# 4、package.json文件

TIP

重点关注 package.json 文件中的如下配置：

  • scripts 中的脚本命令，了解如何启动项目，并预览项目
  • dependencies 中的生产环境依赖包
依赖包 说明
react React库的核心包，我们开发时经常要用到这个包提供的方法和hooks
react-dom 专门负责把 react 生成的虚拟 DOM 渲染到浏览器 Web 环境的实际 DOM 中。
{
    "name": "my-app",  // 项目名称，通常是唯一标识符 
    "private": true,  // 标记该项目为私有，不会在npm等公共仓库中发布
    "version": "0.0.0",  // 项目的版本号，用于标识项目的迭代和变更
    "type": "module",   // 声明该项目使用 ES  Module 模块系统
    "scripts": {// 项目的脚本命令，可以通过npm run <script-name>来运行
        "dev": "vite", // 开发环境命令，使用vite启动开发服务器
       "build": "vite build",// 构建生产环境命令
       "lint": "eslint .",// 使用 ESLint 对项目进行代码检查
        "preview": "vite preview" // 预览生产环境构建产物
    },
    "dependencies": { // 项目依赖的生产环境包
        "react": "^19.2.4", // React 核心库
        "react-dom": "^19.2.4" // React的 DOM 操作库
    },
    "devDependencies": {// 项目开发时依赖的包，不会打包进生产环境
        "@eslint/js": "^9.39.4", // ESLint 的 JavaScript 核心规则集
        "@types/react": "^19.2.14", // React的TypeScript类型定义
        "@types/react-dom": "^19.2.3", // react-dom的TypeScript类型定义
       "@vitejs/plugin-react": "^6.0.1", // Vite的React插件，用于支持React项目
        "eslint": "^9.39.4",// ESLint代码风格检查工具
        "eslint-plugin-react-hooks": "^7.0.1",  // ESLint的React Hooks插件
        "eslint-plugin-react-refresh": "^0.5.2", // ESLint的React Fast Refresh插件,当你对组件的代码进行修改时，能够更快地看到更新效果，而无需完全重新加载整个应用。
        "globals": "^17.4.0", // 提供全局变量定义（如 window、document），供 ESLint 使用. 因为ESLint 默认不认识 window、document、console 这些浏览器全局变
        "vite": "^8.0.4" // Vite构建工具
    }
}

# 5、项目启动流程说明

TIP

本小节我们来学习：当执行 npm run dev 时，项目是如何启动的。

首先我们来看下index.html文件中的代码，如下：

<!--
整个项目的根节点，整个项目所有内容最终都会被添加到该div元素中
-->
<div id="root"></div>

<!--整个项目的JS入口文件，即项目的主文件-->
<script type="module" src="/src/main.jsx"></script>

index.html 文件作为项目的入口文件，里面通过 ES 模块化的方式加载了main.jsx，同时提供了 React 项目根组件容器#root，即：后续所有组件（本质是 DOM）都会被添加到#root容器内。

当执行npm run dev启动项目时，首先会找到index.html文件，然后会顺着找到main.jsx文件，内容如下：

//StrictMode 为 React 内置组件，帮助你在开发过程中尽早地发现组件中的常见错误
import { StrictMode } from 'react'
// createRoot 允许在浏览器的 DOM 节点中创建根节点以显示 React 组件。
import { createRoot } from 'react-dom/client'
// 导入CSS
import './index.css'
// 导入 React 根组件（函数式组件）
import App from './App.jsx'
//  将App根组件的内容渲染成真实DOM添加到html页面中的根节点`<div id="root"></div>`中。
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

main.jsx文件中代码的主要功能：将 App 根组件的内容转换成真实 DOM 添加到了 html 页面中的根节点<div id="root"></div>中。

自带的App.jsx中的内容过于复杂，对初学者不友好，我们把App.jsx中的内容修改成如下：

// App组件（函数式组件），并对外导出
export default function App() {
    // 返回JSX 
    return <h1>Hello React</h1>
}

然后保存，打开浏览器，就可以看到如下：

image-20260408134611803

# 6、项目目录结构

TIP

通过上面提到的 Vite 脚手架创建后的 React 项目目录结构如下：

my-app/                          # 项目根目录
│
├── 📄 eslint.config.js          # ESLint 配置文件（代码规范检查）
├── 📄 index.html                # 应用的 HTML 入口文件
├── 📄 package-lock.json        # npm 依赖的精确版本锁定文件（自动生成）
├── 📄 package.json              # 项目配置和依赖管理文件
├── 📄 README.md                 # 项目说明文档
├── 📄 vite.config.js            # Vite 构建工具配置文件
│
├── 📁 public/                   # 静态资源目录（不经过构建处理）
│   ├── 🖼️ favicon.svg          # 浏览器标签页图标
│   └── 🖼️ icons.svg            # 其他图标文件
│
└── 📁 src/                      # 源代码目录（核心开发目录）
    ├── 📄 App.css               # App 组件的样式文件
    ├── 📄 App.jsx               # 根组件（应用主组件）
    ├── 📄 index.css             # 全局样式文件
    ├── 📄 main.jsx              # 应用入口文件（渲染挂载点）
    │
    └── 📁 assets/               # 资源文件夹（图片、字体等）
        ├── 🖼️ hero.png          # 英雄区/横幅图片
        ├── 🖼️ react.svg         # React logo 图标
        └── 🖼️ vite.svg          # Vite logo 图标

# 7、public 目录介绍

TIP

public 下的资源会在项目生产环境打包时，被完整复制到项目的根目录下。

在前面项目的基础上，当我们执行npm run build 构建 React 项目时，会看到public目录下的vite.svg图片被打包到了dist根目录下。

打包后项目目录结构如下：

//  打包后 ， public 下的图片资源直接放在了 dist 根目录下
dist
├─ assets
│  ├─ hero-5sT3BiRD.png
│  ├─ index-DSI1Iwzh.js
│  ├─ index-DykytF2W.css
│  ├─ react-CHdo91hT.svg
│  └─ vite-BF8QNONU.svg
├─ favicon.svg   // 原 public 文件中图片
├─ icons.svg    // 原 public 文件中图片
└─ index.html  // 项目主页（入口文件）

不管在开发环境还是生产环境，访问 public 目录下的文件，直接通过根路径来访问

export default function App() {
    // 直接通过根路径访问public下的vite.svg图片
    return <h1> Hello React <img src="/favicon.svg" /></h1>
}

image-20260408134806685

public下存放的资源

如果你有以下资源，应该放在public目录下：

  • 不会被源码引用（例如 robots.txt）
  • 必须保持原有文件名（没有经过 hash）
  • ...或者你压根不想引入该资源，只是想得到其 URL

# 8、安装 React 调试工具( 开发检查工具)

以下内容来自 React 官网：React 开发者工具 (opens new window)，点击进入了解更多内容

用 React Developer Tools（React 开发者工具），你可以：

  • 查看页面上有哪些 组件
  • 现场修改组件的 属性（props） 和 状态（state）
  • 找出哪里拖慢了页面性能

调试 React 网站最简单的方法，就是装一个 React Developer Tools 浏览器插件。

下面是各浏览器插件的下载地址

现在，如果你访问一个用 React 构建 的网站，你将看到

  • Components （组件）
  • Profiler （性能分析）

react-devtools-extension

# 9、安装 Vscode 插件： Simple React Snippets

Simple React Snippets 是一个为 VS Code 设计的代码片段扩展插件，其主要功能是通过输入简短的前缀（快捷键） 后按 Tab 或 Enter 键，快速生成 React 常用代码模板，从而提高开发效率

image-20260413185422184

更多用法，查询 Simple React Snippets 源码仓库 (opens new window)

示例

输入ffc 回车，即可生成如下代码

function (|) {
    return ( | );
}

export default |;

输入sfc 回车，即可生成如下代码

const  = (|) => {
  return ( | );
}
 
export default |;

# 五、命令式与声明式编程

要了解什么是声明式，最好与命令式结合在一起来学习，这样能帮助我们更好的理解声明式。

  • 命令式编程：更关注过程

  • 声明式编程：更关注结果

我们先用一个生活中的例子，来帮助你理解。比如，你想要你男朋友帮你倒杯水

  • 如果用命令式，你要对他说：“先到餐桌----拿起我的水杯---转身----向前走---把杯子放在饮水机下---按下开关---端水---走到我面前”，然后才能喝到水。
  • 如果用声明式，你只需要对他说：“我口渴了，想喝水”，他就会把水端到你面前，你就能喝到水了。

通过上面例子，我相信你能理解，什么叫更关注过程和更关注结果。

总结

  • 命令式，需要你把每一步的要如何做告诉他，才能达到你想的结果

  • 声明式，你只需要告诉他你想要什么就好，他就会帮你实现。

# 1、原生 JS 实现：命令式编程

原生JS实现：当点击 div 元素时，会给 div 元素添加内容 “hello"

GIF2024-4-714-38-50

// 1、获取.box元素
const box = document.querySelector(".box");
// 2、.box绑定click事件
box.onclick = function () {
    // 3、将box的内容更新为Hello
    this.innerText = "Hello";
};

以上代码为命令式编程，需要详细的告诉计算机，我们要做的每一步操作。以上代码在执行时分为以下三步：

  • 获取 .box 元素
  • 给 .box 元素绑定 click 事件
  • 当 click 事件触发后，为 .box 元素添加内容为 "hello"

# 2、React 库实现：声明式编程

当点击 div 元素时，会给 div 元素添加内容 "hello"

GIF2024-4-714-38-50

import { useState } from "react";

export default function App() {
  // 定义div元素的行内样式
  const styleObj = { width: 100, height: 100, background: "red" };
  const [state, setState] = useState("");
  // 点击事件
  const handleClick = () => {
    setState("hello");
  };
  return (
    <div onClick={handleClick} style={styleObj}>
      {state}
    </div>
  );
}

以上代码，重点关注 HTML 部分代码，这就是React帮我们实现以上功能的方式。可以看到，我们提供的是一个“结果”。就好比告诉React：“嘿，React，我要在div中显示上面变量state里的内容，当我点击div这个元素时，你调用handleClick方法，帮我更新下div中的内容”。

至于具体的实现过程，我们不需要关注，React会帮我们完成。换句话说，React帮我们封装了整个JS 操作 DOM 的过程，因此，我们可以猜想，React 的内部实现一定是命令式的，而暴露给用户的却是声明式的。

总结：

声明式编程的好处，就是让开发人员无需直接操作DOM，只需关注业务逻辑，提高开发效率

JSX核心基础、条件与列表渲染、事件与样式绑定 →

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群，获取资料

X