资源介绍
电子书）
核心章节与关键内容
1. React 基础：是什么与为什么
React 定义：用于构建 web 和原生用户界面的 JavaScript 库，专注于交互式 UI 开发
与原生 JavaScript 的区别：
原生 JavaScript 采用命令式编程（需详细定义每一步操作）
React 采用声明式编程（只需描述目标 UI 状态，React 负责实现细节）
虚拟 DOM：React 内部维护的内存中 DOM 表示，通过与真实 DOM 对比优化更新效率
单页应用（SPA）：通过 React 控制整个页面及路由，仅需一个 HTML 文件
项目创建：推荐使用 Vite 工具快速搭建 React 项目
2. React 组件与 JSX
组件概念：可重用的 UI 构建块，通过函数定义，必须返回可渲染内容（通常是 JSX）
JSX 特性：
融合 JavaScript 与 HTML-like 语法，需经转译才能在浏览器运行
必须有闭合标签，不能直接返回多个同级元素（需用 Fragment <>包裹）
可通过{}嵌入动态内容
组件命名：采用 PascalCase 命名法，使用时需大写开头以区分内置组件
图片渲染：本地图片需导入使用，public 文件夹下的资源可直接引用路径
3. 组件与 Props
Props 作用：使组件可配置和重用，类似 HTML 属性
Props 传递与接收：
通过组件属性传递，组件函数通过参数接收（通常使用对象解构）
特殊的children prop 用于传递组件标签间的内容
Props 扩展：使用展开运算符...传递多个 props，避免重复代码
Props 链问题：多层组件传递 props 可能导致 "prop drilling"，后续章节会介绍解决方案
4. 事件与状态处理
事件处理：通过on[EventName] props 绑定事件处理器（如onClick）
状态（State）：
用于管理组件内部动态数据，通过useState() Hook 创建
包含当前状态值和更新函数，更新函数触发组件重新渲染
依赖先前状态更新时，应使用函数形式（setState(prev => newVal)）
表单处理：通过onSubmit处理提交，使用event.preventDefault()阻止默认行为
状态提升：将共享状态移至共同父组件，通过 props 在组件间共享
5. 列表渲染与条件内容
条件渲染：通过 if 语句、三元表达式或&&运算符实现
列表渲染：
使用map()方法将数组转换为 JSX 元素列表
必须为列表项添加唯一key属性，优化 React 的更新机制
列表更新：应采用不可变方式（如concat()或扩展运算符）更新数组状态
6. React 应用样式
样式方案：
内联样式：通过style prop 传递对象，属性采用驼峰式
CSS 类：通过className指定，支持动态切换
样式作用域：
CSS Modules：通过.module.css文件使样式局部化
styled-components：CSS-in-JS 库，将样式与组件绑定
Tailwind CSS：通过组合工具类实现样式
7. Portals 与 Refs
Refs 用途：
直接访问 DOM 元素（如读取输入值）
存储跨组件渲染周期保持的值
受控与非受控组件：
受控组件：由 React 状态管理值
非受控组件：通过 Refs 获取值，适用于简单场景
Portals：将组件渲染到 DOM 的指定位置，解决模态框等层级问题
8. 副作用处理
副作用：组件渲染外的操作（如 HTTP 请求、定时器），需用useEffect()处理
useEffect () 用法：
第一个参数为副作用函数，第二个参数为依赖数组
依赖变化时重新执行，空数组表示仅执行一次
可返回清理函数，处理资源释放（如清除定时器）
依赖管理：需包含所有在副作用中使用的外部变量，避免 stale closure 问题
9. 表单处理与 Form Actions
表单提交：除传统onSubmit外，React 19 + 支持 Form Actions
Form Actions 特性：
通过action prop 绑定处理函数，自动接收 FormData
支持同步和异步操作
相关 Hooks：
useActionState()：管理表单状态及提交状态
useFormStatus()：在嵌套组件中获取表单提交状态
useOptimistic()：实现乐观更新，提升用户体验
10. React 内部机制与优化
组件更新机制：状态变化触发组件重新渲染，子组件也会随之更新
优化技术：
memo()：缓存组件，避免不必要的重渲染
useMemo()：缓存计算结果，避免重复计算
useCallback()：缓存函数引用，配合memo()使用
代码分割：使用lazy()和Suspense实现组件懒加载，减少初始加载时间
React 编译器：实验性工具，自动优化代码（如添加memo和useMemo）
11. 复杂状态管理
Context API：
解决跨组件状态共享问题，避免 prop drilling
通过createContext()创建，Provider提供值，useContext()消费
useReducer：替代useState处理复杂状态逻辑，通过 action 驱动状态变化
Context 与状态提升：根据场景选择，简单共享用状态提升，深层共享用 Context
12. 自定义 Hooks
作用：抽取可重用逻辑，必须以use开头
特性：可接收参数并返回值，内部可使用其他 Hooks
示例：封装表单处理、数据获取等逻辑，提高代码复用性
13-18. 路由、数据管理与高级特性
React Router：实现 SPA 路由，支持动态路由、嵌套路由和编程式导航
Next.js：
支持服务端渲染（SSR）和静态生成
基于文件的路由系统，简化路由配置
React Server Components：在服务端渲染组件，减少客户端 JavaScript
Suspense 与 use ()：处理数据获取时的加载状态，提供更好的用户体验
附录与资源
每章配套练习和答案，帮助巩固知识
提供补充内容（ cheat sheet、视频推荐）
包含进一步学习资源和项目 ideas（如购物车、认证系统）
总结
本书全面覆盖 React 核心概念，从基础组件、状态管理到高级特性如 Server Components，结合实例和练习，适合开发者系统学习 React。强调声明式编程思想和 React 内部工作原理，帮助读者写出高效、可维护的 React 应用。
React Key Concepts