React on 编程那些事儿

第1章前端基础与React概述

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-01 - 前端基础与 React 概述

1.1 网页是如何工作的

你有没有想过，当你往浏览器地址栏里敲下 www.baidu.com，按下回车的那一瞬间，到底发生了什么？是什么力量让那些文字、图片、视频神奇地出现在你的屏幕上？是什么让一个"白纸一张"的浏览器变成了一个五彩斑斓的网页？这一切的幕后英雄，就是我们今天要揭开的秘密。

第2章 Node.js与包管理器

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-02 - Node.js 与包管理器

2.1 Node.js 简介

你有没有想过这样一个问题：JavaScript 这门语言，不是只能在浏览器里运行吗？它是怎么跑到服务器上去的？Node.js 就是这个"魔法"的化身——它把 Chrome 浏览器的 V8 引擎单独拎出来，放到一个没有浏览器的环境里运行，于是 JavaScript 第一次能够在服务器端大展拳脚。

第3章开发工具配置

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-03 - 开发工具配置

3.1 VS Code 下载与安装

工欲善其事，必先利其器。作为 React 开发者，我们的"器"就是代码编辑器。目前市面上最流行的前端代码编辑器，当属 Visual Studio Code（简称 VS Code）——它免费、开源、轻量、功能强大，而且是微软出品，质量有保证（这次真的是微软出品，不像某些别的产品……）。

第4章第一个React项目——Vite与React 19

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-04 - 第一个 React 项目——Vite + React 19

4.1 为什么选 Vite？

在正式开始写代码之前，我们先来聊聊为什么是 Vite。可能有些同学听说过 Webpack，这个老牌构建工具曾经统治前端江湖近十年。而 Vite 是 2020 年才诞生的"小鲜肉"，但它一出场就以"闪电般的速度"征服了无数开发者。

第5章 JSX语法

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-05 - JSX——React 的语法糖

5.1 JSX——React 的语法糖

终于到了 React 最独特、最让人"又爱又恨"的部分——JSX。如果你之前没接触过 JSX，第一次看到它的时候可能会产生一种"这到底是 HTML 还是 JavaScript"的困惑。没错，这就是 JSX 的魔力所在——它让 HTML 和 JavaScript 共处一室，在同一个文件里眉来眼去。

第6章组件——React核心概念

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-06 - 组件——React 的核心

6.1 组件化开发的思想

如果把 React 应用比作一座城市，那组件就是这座城市的每一栋建筑。有的建筑是摩天大楼（页面组件），有的是小卖部（按钮组件），有的是公交站牌（导航组件）。每一栋建筑都有自己的职责，自己的一亩三分地，不会跑去管别人的闲事——这就是组件化开发的核心思想。

第7章 Props与组件参数

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-07 - Props——组件的"参数"

7.1 Props 基础

如果把 React 组件比作一台饮料机，那 Props 就是投进去的硬币和选择按钮——它们是组件的"输入参数"，决定了组件最终输出什么样的"饮料"。 Props 是 React 组件之间传递数据的主要方式，也是 React 单向数据流的核心载体。

第8章 State与组件生命周期

Wed, 25 Mar 2026 12:56:00 +0800

# Chapter-08 - State 与组件生命周期

8.1 State 基础

Props 是从外部传入的数据，那组件内部自己产生的数据存在哪里呢？答案就是 State。如果说 Props 是组件的"身份证"（由父母给的，不能自己改），那 State 就是组件的"钱包"（自己挣的，自己管）。State 是组件内部的可变数据，当 State 变化时，组件会自动重新渲染。

第9章 useEffect与副作用

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-09 - useEffect——副作用的正确打开方式

9.1 useEffect 基础

如果把 React 组件比作一个"加工厂"，那 useEffect 就是这个加工厂的"生产许可证"——它告诉 React：“除了正常生产产品（渲染 UI）之外，我还需要做一些别的事情，比如：采购原材料（请求数据）、处理废水废气（清理订阅）、和外面的世界打交道（操作 DOM、播放音乐、记录日志）。” useEffect 让函数组件拥有了"和外界互动"的能力。

第10章 useState深入与自定义Hooks

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-10 - useState 深入与自定义 Hook

10.1 函数式更新

10.1.1 什么是函数式更新：`setState(prevState => ...)`

函数式更新是 setState 的一种特殊用法——传入一个以前一个状态为参数的函数，返回新的状态。

第11章 useContext与跨组件传值

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-11 - useContext 与跨层级数据传递

11.1 Context 基础

11.1.1 Props 层层传递的痛苦：Props Drilling

在第六章我们学过，数据通过 props 从父组件传给子组件。但如果组件嵌套得很深（层级很多），数据就需要一层一层地往下传——这叫 Props Drilling（props 层层向下钻）。

第12章 useReducer与复杂状态管理

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-12 - useReducer——复杂状态逻辑管理

12.1 useState vs useReducer

12.1.1 useState 适用场景：简单、独立的状态

useState 适合管理简单的、相互独立的状态。

1
2
3
4


// useState 最适合的场景：单个的、简单的状态
const [name, setName] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [count, setCount] = useState(0)

12.1.2 useReducer 适用场景：状态逻辑复杂、多个子值相关联

当状态满足以下条件时，useReducer 比 useState 更好：

第13章 useMemo、useCallback与性能优化

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-13 - useMemo、useCallback 与 React.memo——性能优化

13.1 useMemo：缓存计算结果

13.1.1 为什么需要 useMemo？

假设你有一个组件，每次渲染时都需要对大量数据做过滤、排序、统计——这些计算可能很耗时（想象一下对10万条数据排序）。问题是：即使数据没变，这些计算在每次渲染时都会重复执行。

第14章 useLayoutEffect与Suspense基础

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-14 - useLayoutEffect 与 Suspense 基础

14.1 useLayoutEffect

14.1.1 useLayoutEffect 与 useEffect 的时机差异

useLayoutEffect 和 useEffect 的签名完全一样，但执行时机完全不同：

1
2
3
4
5
6
7
8
9


useEffect(() => {
 // 在渲染内容显示到屏幕之后异步执行
 console.log('useEffect: 渲染后异步执行')
}, [])

useLayoutEffect(() => {
 // 在渲染后但浏览器绘制之前同步执行
 console.log('useLayoutEffect: 渲染后同步执行')
}, [])

执行顺序：

第15章组件设计模式

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-15 - 组件设计模式

15.1 高阶组件（HOC）

15.1.1 HOC 的概念：接收组件，返回新组件

高阶组件（Higher-Order Component） 是一个函数，接收一个组件作为参数，返回一个增强后的新组件。

第16章 React样式全指南

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-16 - React 样式全解

16.1 内联样式

16.1.1 内联样式的基本写法

内联样式直接在 JSX 元素的 style 属性中传入 JavaScript 对象：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


function InlineStyleDemo() {
 const styles = {
 container: {
 padding: '20px',
 backgroundColor: '#f5f5f5',
 borderRadius: '8px'
 },
 title: {
 fontSize: '24px',
 fontWeight: 'bold',
 color: '#333'
 }
 }

 return (
 <div style={styles.container}>
 <h1 style={styles.title}>内联样式演示</h1>
 <p style={{ color: '#666', fontSize: '14px' }}>
 这是一段内联样式的文字
 </p>
 </div>
 )
}

16.1.2 动态样式的实现

内联样式的优势是可以轻松实现动态样式：

第17章 React Router v7路由管理

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-17 - React Router v7——路由管理

17.1 SPA 与路由基础

17.1.1 传统多页应用 vs SPA

传统多页应用（MPA）：每次路由跳转，浏览器都会向服务器请求一个新的 HTML 页面。整个页面刷新，体验不流畅。

第18章表单处理与数据验证

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-18 - 表单处理与数据验证

18.1 受控组件

18.1.1 受控组件的概念：表单数据由 React 控制

受控组件（Controlled Component） 是指表单元素的值完全由 React 的 state 来控制的组件。用户的输入会触发 onChange 事件，更新 state，state 更新导致组件重新渲染，渲染出新的值。

第19章 HTTP请求与数据获取

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-19 - HTTP 请求与数据获取

19.1 fetch API

19.1.1 fetch 的基本用法

fetch 是浏览器原生的网络请求 API，不需要安装任何库。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 基本语法
fetch(url, options)
 .then(response => {
 // 处理响应
 return response.json() // 解析 JSON
 })
 .then(data => {
 console.log(data)
 })
 .catch(error => {
 console.error('请求失败:', error)
 })

19.1.2 GET 请求与查询参数拼接

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// 简单的 GET 请求
fetch('https://api.example.com/users')
 .then(res => res.json())
 .then(data => console.log(data))

// 带查询参数
const params = new URLSearchParams({
 page: 1,
 limit: 10,
 category: 'tech'
})

fetch(`https://api.example.com/articles?${params}`)
 .then(res => res.json())
 .then(data => console.log(data))

// 或者手动拼接
fetch('https://api.example.com/users?page=1&limit=10')
 .then(res => res.json())

19.1.3 POST 请求与请求体（JSON / FormData）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


// POST JSON
fetch('https://api.example.com/users', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': 'Bearer token123'
 },
 body: JSON.stringify({
 name: '小明',
 email: 'xiaoming@example.com',
 age: 25
 })
})
 .then(res => {
 if (!res.ok) {
 throw new Error(`HTTP 错误！状态码：${res.status}`)
 }
 return res.json()
 })
 .then(data => console.log('创建成功:', data))
 .catch(err => console.error('请求失败:', err))

// POST FormData（文件上传等）
const formData = new FormData()
formData.append('name', '小明')
formData.append('avatar', fileInput.files[0])

fetch('https://api.example.com/upload', {
 method: 'POST',
 body: formData
 // 注意：FormData 不需要手动设置 Content-Type
})
 .then(res => res.json())

19.1.4 fetch 的错误处理：response.ok 与 try-catch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


async function fetchUser(id) {
 try {
 const res = await fetch(`https://api.example.com/users/${id}`)

 // 检查 HTTP 状态码
 if (!res.ok) {
 if (res.status === 404) {
 throw new Error('用户不存在')
 }
 if (res.status === 401) {
 throw new Error('未授权，请重新登录')
 }
 throw new Error(`请求失败：${res.status} ${res.statusText}`)
 }

 const data = await res.json()
 return data

 } catch (error) {
 // 捕获网络错误（如断网）
 if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
 throw new Error('网络连接失败，请检查网络')
 }
 throw error // 其他错误重新抛出
 }
}

19.1.5 fetch 的超时处理：AbortController

fetch 默认没有超时机制，需要用 AbortController 实现：

第20章 Redux Toolkit完整状态管理

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-20 - Redux Toolkit——最完整的全局状态方案

20.1 Redux 核心概念

20.1.1 Redux 的三大原则：单一数据源、state 只读、纯函数

Redux 是 React 生态中最经典的状态管理库，基于三大原则：

第21章 Zustand轻量级状态管理

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-21 - Zustand——轻量级状态管理

21.1 Zustand 基础

21.1.1 安装与 store 创建

Zustand 是一个超轻量的状态管理库，比 Redux 简洁得多，但功能同样强大。

什么场景需要它？想象一下：你的应用有"主题切换"功能，用户在设置页改了深色模式，头部组件、侧边栏组件、底部组件…十几个组件都要响应这个变化。用 Context 要层层嵌套，用 Redux 又太重。Zustand 就是来解决这种"中等规模"状态共享问题的——比 Context 强大（细粒度订阅），比 Redux 简单（不用写模板代码）。

第22章 TypeScript与React

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-22 - TypeScript 与 React

22.1 为什么用 TypeScript？

22.1.1 类型安全带来的开发体验提升

TypeScript 是 JavaScript 的超集，它在 JavaScript 的基础上添加了静态类型检查。在开发阶段就能发现错误，而不是等到运行时才崩溃。

第23章 Vite深入配置

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-23 - Vite 深入配置

23.1 Vite 原理

23.1.1 开发环境：基于 ESM 的按需编译

Vite 的开发环境利用浏览器的原生 ES Module 支持，不需要打包。源文件按需编译，服务启动速度极快。

flowchart LR
 A["浏览器请求\nimport App from './App.jsx'"] --> B["Vite 拦截请求"]
 B --> C["查找源文件"]
 C --> D["编译\n（仅此文件）"]
 D --> E["返回编译后的 JS\n（含 HMR 客户端代码）"]

23.1.2 生产环境：Rollup 打包

Vite 在生产环境使用 Rollup 进行打包，生成优化的静态资源。

第24章测试——React应用质量保障

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-24 - 测试——React 应用的质量保障

24.1 测试概念

24.1.1 单元测试：最小可测试单元

单元测试（Unit Test） 针对代码的最小单元进行测试，通常是一个函数或一个组件。

第25章 React性能优化全解

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-25 - React 性能优化全解

25.1 React DevTools Profiler

25.1.1 安装 Profiler 插件

在 Chrome 扩展商店搜索"React Developer Tools"，安装后打开 DevTools（F12），切换到 “Profiler” 标签。

第26章项目一——Todo App增强版

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-26 - 项目一——Todo App 增强版

26.1 项目需求分析与结构设计

26.1.1 功能列表：增删改查、筛选、分类、持久化

一个完整的 Todo App 增强版不只是"能记事情"这么简单——它要像一个小型的效率工具，让用户感受到"我在掌控我的任务"。

第27章项目二——社交类应用

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-27 - 项目二——社交类应用

27.1 项目架构设计

27.1.1 页面划分：Feed / 详情 / 个人页 / 消息

社交应用的核心页面设计，某种程度上决定了整个应用的用户体验基线。

第28章项目三——电商后台管理系统

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-28 - 项目三——电商后台管理系统

28.1 组件库选型

28.1.1 Ant Design 入门：开箱即用的企业级组件

Ant Design（简称 AntD）是蚂蚁金服开源的企业级 React 组件库，提供丰富的企业级组件。

第29章 React运行机制

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-29 - React 运行机制

29.1 Virtual DOM 原理

29.1.1 DOM 的性能问题

直接操作真实 DOM 是昂贵的——每次 DOM 修改都会触发浏览器的重排（Reflow）和重绘（Repaint）。

29.1.2 虚拟 DOM 的数据结构

虚拟 DOM 是一个 JavaScript 对象树，描述真实 DOM 的结构。

第30章 React 19新特性

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-30 - React 19 新特性

30.1 use() Hook：React 19 最重大的 API

30.1.1 use() 的基本用法

use() 是 React 19 引入的最重要新 API，它允许在组件内部读取 Promise 和 Context。

1
2
3
4
5
6
7


import { use } from 'react'

// use() 读取 Promise
function UserProfile({ userPromise }) {
 const user = use(userPromise)
 return <h1>{user.name}</h1>
}

30.1.2 use() 在 render 中读取 Promise / Context

use() 可以在渲染阶段读取 Promise，并在 Promise resolve 后自动重新渲染。

第31章 React并发模式

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-31 - React 并发模式

31.1 并发渲染原理

31.1.1 并发渲染的内部机制

React 18 引入了并发渲染（Concurrent Rendering），它让 React 能够同时准备多个版本的 UI，根据优先级选择先渲染哪个。

第32章 Next.js全栈开发

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-32 - Next.js 全栈开发

32.1 Next.js 概述

32.1.1 Next.js App Router vs Pages Router

对比项	Pages Router	App Router
路由	基于文件系统	基于文件系统
组件	客户端组件	服务端组件优先
数据获取	getServerSideProps	async Server Components
推荐场景	现有项目	新项目

32.1.2 App Router 的新特性

服务端组件默认：组件默认是服务端的
React 19 支持：App Router 是 React 19 特性的完整支持
嵌套布局：layout.tsx 实现嵌套布局

32.1.3 迁移策略

从 Pages Router 迁移到 App Router：

第33章 React生态系统与优秀库

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-33 - React 生态精选库

33.1 动画：Framer Motion

33.1.1 motion 组件的基本用法

为什么需要动画库？ 想象没有动画库的时候，你想让一个 div 淡入+移动+缩放，要写一堆 setInterval + CSS transition，还要手动管理动画状态。代码又臭又长，动画间的协调更是噩梦。

第34章 React与AI

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-34 - React 与 AI

34.1 AI API 集成

34.1.1 OpenAI API 的基本调用

React + AI 可以做什么？ 这是个开放问题，答案很多：

AI 聊天机器人：像 ChatGPT 一样的对话界面
内容生成：输入标题 AI 生成文章、输入描述生成图片
智能客服：理解用户问题，自动回复或转人工
代码助手：解释代码、debug、生成代码
多模态：输入图片+文字，AI 理解图片内容

本质上，AI API 让 React 应用有了"理解"和"生成"的能力——不只是展示静态内容，而是能对话、能思考、能创造。

第35章跨平台桌面开发

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-35 - 跨平台桌面开发

35.1 Electron

35.1.1 Electron 架构：主进程 + 渲染进程

Electron 使用 Chromium + Node.js，分为：

主进程（Main Process）：Node.js 环境，管理窗口、系统操作
渲染进程（Renderer Process）：Chromium 环境，运行 React 应用

35.1.2 React + Electron 项目搭建

1
2
3
4


# npm create electron-vite@latest：调用 npm 执行 electron-vite 脚手架工具
# my-app：项目名称（会创建一个同名文件夹）
# electron-vite 集成了 Vite + Electron，比纯 Electron 配置少很多
npm create electron-vite@latest my-app

35.1.3 IPC 通信：主进程与渲染进程数据交换

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 主进程（main/index.ts）
import { app, ipcMain } from 'electron'

ipcMain.handle('get-app-version', () => {
 return app.getVersion()
})

ipcMain.handle('open-file-dialog', async () => {
 const { dialog } = require('electron')
 const result = await dialog.showOpenDialog({ properties: ['openFile'] })
 return result.filePaths
})

1
2
3
4
5
6
7


// 渲染进程（ preload.cjs，用于安全暴露 API）
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
 getAppVersion: () => ipcRenderer.invoke('get-app-version'),
 openFileDialog: () => ipcRenderer.invoke('open-file-dialog')
})

1
2


// React 组件中调用
const version = await window.electronAPI.getAppVersion()

35.1.4 electron-builder 打包发布

1

npm install -D electron-builder

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// electron-builder.json
{
 // 应用唯一标识符，格式通常为 com.公司名.产品名，用于系统安装和卸载
 "appId": "com.myapp.desktop",
 // 打包后显示的应用名称（即开始菜单/程序列表中的名字）
 "productName": "MyApp",
 // 打包输出目录，"release" 文件夹下会生成各平台的安装包
 "directories": { "output": "release" },
 // 需要打包进应用的文件或目录（** 通配符表示递归匹配）
 // 此处将 Vite 构建产物 dist 目录下的所有文件打包
 "files": ["dist/**/*"],
 // Windows 平台打包配置
 // target 指定打包格式：nsis = 安装向导格式（.exe），portable = 单文件便携版
 // 可选值还有：portable、appx、msi 等
 "win": { "target": ["nsis"] },
 // macOS 平台打包配置
 // target 可选：dmg（磁盘镜像）、pkg（安装包）、zip（压缩包）
 "mac": { "target": ["dmg"] },
 // Linux 平台打包配置
 // target 可选：AppImage（通用可执行格式）、deb（Debian/Ubuntu）、rpm（Fedora/RHEL）、tar.gz
 "linux": { "target": ["AppImage"] }
}

35.2 Tauri

35.2.1 Tauri 的优势：体积小、安全、Rust 后端

Tauri 用 Rust 替代 Node.js 作为后端，产物极小（~3MB vs Electron 的 100MB+）。包体积小的代价是：Node.js 生态不可用，系统级 API 需要额外配置。

第36章 React工程化与架构

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-36 - React 工程化与架构

36.1 项目目录结构设计

36.1.1 feature-based 结构

按功能/业务模块组织代码，适合中大型项目。

src/
├── features/
│ ├── auth/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── api/
│ └── products/
└── shared/
 ├── components/
 ├── hooks/
 └── utils/

36.1.2 常用目录划分

目录	职责
`components/`	公共 UI 组件
`pages/`	页面组件
`hooks/`	自定义 Hooks
`utils/`	工具函数
`api/`	API 请求
`stores/`	状态管理
`types/`	TypeScript 类型
`constants/`	常量配置

36.2 代码质量

36.2.1 ESLint + Prettier 配置

1
2


npm install -D eslint prettier
npm install -D eslint-config-prettier eslint-plugin-prettier

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// .eslintrc.json
{
 "extends": [
 "eslint:recommended",
 "plugin:react/recommended",
 "plugin:@typescript-eslint/recommended",
 "eslint-config-prettier" // prettier 必须放在最后，用于关闭与 Prettier 冲突的 ESLint 规则
 ],
 "plugins": ["prettier"],
 "rules": {
 "prettier/prettier": "error", // 将 Prettier 格式化问题报告为 ESLint 错误
 "react/react-in-jsx-scope": "off",
 "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
 }
}

⚠️ 注意：eslint-config-prettier 必须放在 extends 数组的最后一位！否则它会覆盖其他规则，让你的 Prettier 配置失效。同理，eslint-plugin-prettier 建议配合 eslint-config-prettier 使用，否则可能重复检查。

第37章 CI/CD与自动化

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-37 - CI/CD 与自动化

37.1 GitHub Actions

37.1.1 CI/CD 的概念

在没有 CI/CD 的年代，开发者手动打包、上传服务器、盯着日志——听起来像远古 rituals，实际上也没好到哪里去。

CI（Continuous Integration，持续集成）：你的代码每次 push 到仓库，自动化流水线立即启动——安装依赖、运行测试、构建产物。任何一个人提交的代码有问题，都会第一时间暴露，而不是等到上线前夜才发现一团乱麻。

第38章 React未来展望

Wed, 25 Mar 2026 12:56:00 +0800

Chapter-38 - React 未来展望

38.1 React Compiler（实验性）

38.1.1 自动记忆化的编译器原理

React Compiler（最初代号 React Forget）是一个实验性编译器，能够在编译时自动识别可以安全 memoize 的代码片段，插入 useMemo / useCallback，让你从"手动优化地狱"中解放出来。

React on 编程那些事儿

第1章 前端基础与React概述

Chapter-01 - 前端基础与 React 概述

1.1 网页是如何工作的

第2章 Node.js与包管理器

Chapter-02 - Node.js 与包管理器

2.1 Node.js 简介

第3章 开发工具配置

Chapter-03 - 开发工具配置

3.1 VS Code 下载与安装

第4章 第一个React项目——Vite与React 19

Chapter-04 - 第一个 React 项目——Vite + React 19

4.1 为什么选 Vite？

第5章 JSX语法

Chapter-05 - JSX——React 的语法糖

5.1 JSX——React 的语法糖

第6章 组件——React核心概念

Chapter-06 - 组件——React 的核心

6.1 组件化开发的思想

第7章 Props与组件参数

Chapter-07 - Props——组件的"参数"

7.1 Props 基础

第8章 State与组件生命周期

8.1 State 基础

第9章 useEffect与副作用

Chapter-09 - useEffect——副作用的正确打开方式

9.1 useEffect 基础

第10章 useState深入与自定义Hooks

Chapter-10 - useState 深入与自定义 Hook

10.1 函数式更新

10.1.1 什么是函数式更新：setState(prevState => ...)

第11章 useContext与跨组件传值

Chapter-11 - useContext 与跨层级数据传递

11.1 Context 基础

11.1.1 Props 层层传递的痛苦：Props Drilling

第12章 useReducer与复杂状态管理

Chapter-12 - useReducer——复杂状态逻辑管理

12.1 useState vs useReducer

12.1.1 useState 适用场景：简单、独立的状态

12.1.2 useReducer 适用场景：状态逻辑复杂、多个子值相关联

第13章 useMemo、useCallback与性能优化

Chapter-13 - useMemo、useCallback 与 React.memo——性能优化

13.1 useMemo：缓存计算结果

13.1.1 为什么需要 useMemo？

第14章 useLayoutEffect与Suspense基础

Chapter-14 - useLayoutEffect 与 Suspense 基础

14.1 useLayoutEffect

14.1.1 useLayoutEffect 与 useEffect 的时机差异

第15章 组件设计模式

Chapter-15 - 组件设计模式

15.1 高阶组件（HOC）

15.1.1 HOC 的概念：接收组件，返回新组件

第16章 React样式全指南

Chapter-16 - React 样式全解

16.1 内联样式

16.1.1 内联样式的基本写法

16.1.2 动态样式的实现

第17章 React Router v7路由管理

Chapter-17 - React Router v7——路由管理

17.1 SPA 与路由基础

17.1.1 传统多页应用 vs SPA

第18章 表单处理与数据验证

Chapter-18 - 表单处理与数据验证

18.1 受控组件

18.1.1 受控组件的概念：表单数据由 React 控制

第19章 HTTP请求与数据获取

Chapter-19 - HTTP 请求与数据获取

19.1 fetch API

19.1.1 fetch 的基本用法

19.1.2 GET 请求与查询参数拼接

19.1.3 POST 请求与请求体（JSON / FormData）

19.1.4 fetch 的错误处理：response.ok 与 try-catch

19.1.5 fetch 的超时处理：AbortController

第20章 Redux Toolkit完整状态管理

Chapter-20 - Redux Toolkit——最完整的全局状态方案

20.1 Redux 核心概念

20.1.1 Redux 的三大原则：单一数据源、state 只读、纯函数

第21章 Zustand轻量级状态管理

Chapter-21 - Zustand——轻量级状态管理

21.1 Zustand 基础

第1章前端基础与React概述

第3章开发工具配置

第4章第一个React项目——Vite与React 19

第6章组件——React核心概念

10.1.1 什么是函数式更新：`setState(prevState => ...)`

第15章组件设计模式

第18章表单处理与数据验证

第24章测试——React应用质量保障

第26章项目一——Todo App增强版

第27章项目二——社交类应用

第28章项目三——电商后台管理系统

第35章跨平台桌面开发