内容简介
本书旨在系统介绍React框架，围绕React18及后续版本的核心开发范式--函数组件和Hooks展开，并以一款聊天应用的开发为例演示如何运用现代React技术开发Web应用。另外，本书还将探讨 AI技术在React前端开发中的应用实践。
本书分为3个部分。第一部分是React基础，从创建React项目入手，先系统介绍JSX 语法、React组件、基础HooksAPI等基础知识，再介绍如何使用props、state、context等数据驱动 React开发，如何利用副作用和事件处理实现业务、交互逻辑，以及如何开发组件样式。第二部分是React 进阶，深入介绍生命周期与虚拟DOM、应用状态管理及相关框架、优化性能与用户体验，并从自定义Hooks、代码复用等角度介绍如何开发可扩展的React代码。第三部分是Web应用开发，以聊天应用为载体，结合 React技术生态，演示前端路由、表单处理、与服务器端通信、质量保证、工程化与架构等，并以开发 AI 聊天机器人为例探索AI时代前端开发的创新方向。同时，本书会在相关章节中融入AI辅助开发的内容，涵盖AIIDE、智能体代码生成、组件拆分辅助、性能问题分析、样式代码生成和单元测试、代码审查等。
本书既适合有一定编程经验的Web应用程序开发人员阅读，也可作为高校及培训机构相关专业课程的教学用书。
目录
第 一部分 React基础
第 1章 你好，React 3
1．1 React技术简介 3
1．2 贯穿全书的聊天应用oh-my-chat 3
1．3 快速创建React项目 5
1．3．1 准备开发环境 5
1．3．2 选择代码编辑器 7
1．3．3 AI辅助：安装AI代码编辑器 7
1．3．4 使用create-vite创建React项目 8
1．3．5 提交代码到代码仓库 12
1．4 编写基础应用代码 13
1．4．1 项目实现：编写聊天视图代码 13
1．4．2 AI辅助：生成联系人视图代码 20
1．5 React的技术生态 22
1．5．1 一些开源React组件库 23
1．5．2 什么是“React全家桶” 23
1．5．3 React Native简介 24
1．6 AI辅助的前端开发概述 24
1．7 小结 25
第 2章 JSX语法 26
2．1 JSX语法基础 27
2．1．1 JSX是一种语法糖 27
2．1．2 JSX的“X”：标记的基本写法 30
2．1．3 JSX的“JS”：JavaScript表达式 34
2．1．4 JSX与HTML的异同 35
2．2 进一步理解JSX 36
2．2．1 前端开发的声明式与命令式 36
2．2．2 JSX的产物：React元素 37
2．2．3 不用JSX还能写React代码吗 39
2．3 编写JSX的常用模式 39
2．3．1 条件渲染 40
2．3．2 循环渲染 42
2．3．3 透传子元素 45
2．3．4 属性展开语法 45
2．4 AI辅助：生成JSX代码 46
2．5 小结 48
第3章 React组件 49
3．1 前端开发组件化 50
3．2 用函数定义React组件 51
3．3 组件与Hooks API 52
3．3．1 借用函数式编程理解Hooks 53
3．3．2 React Hooks有哪些 55
3．3．3 Hooks的使用规则 55
3．4 组件树 56
3．5 如何拆分React组件 57
3．5．1 用React Developer Tools查看组件树 58
3．5．2 拆分组件的原则和常见方法 59
3．5．3 项目实现：继续拆分oh-my-chat的组件 60
3．5．4 项目实现：将组件拆分为独立文件 63
3．5．5 组件拆分的一些心得 65
3．6 AI辅助：AI与组件树设计 66
3．6．1 AI辅助：用AI指导组件拆分 66
3．6．2 AI辅助：根据代码画出组件树 67
3．7 过时API：类组件 68
3．7．1 函数组件的崛起 68
3．7．2 还有必要学习类组件吗 70
3．8 小结 71
第4章 数据驱动（上）：React的数据 72
4．1 React是数据驱动的前端框架 73
4．2 Props：父组件传给子组件的数据 73
4．2．1 如何声明和使用props 74
4．2．2 项目实现：利用props拆分oh-my-chat列表组件 75
4．3 state：组件自己的状态数据 76
4．3．1 组件状态 76
4．3．2 核心Hook：useState 77
4．3．3 项目实现：利用state管理oh-my-chat列表数据 80
4．3．4 更新state的自动批处理 85
4．4 context：组件树共享的全局数据 86
4．5 小结 88
第5章 数据驱动（下）：组件间通信 89
5．1 React组件间通信 89
5．2 组件间通信模式：状态提升 90
5．2．1 什么是状态提升 90
5．2．2 项目实现：利用状态提升实现联系人列表和详情的联动 91
5．3 组件间通信模式：属性钻取 93
5．3．1 什么是属性钻取 93
5．3．2 项目实现：用context代替props切换视图 94
5．4 AI辅助：重构组件代码 98
5．5 React中的单向数据流 100
5．5．1 什么是数据流 101
5．5．2 React单向数据流 101
5．5．3 项目实现：分析oh-my-chat的数据流 102
5．6 小结 103
第6章 React的副作用 104
6．1 什么是副作用 104
6．1．1 前端领域的副作用 105
6．1．2 React中的副作用 105
6．1．3 React中的渲染和提交 105
6．2 核心Hook：useEffect 106
6．2．1 useEffect的基本用法 106
6．2．2 副作用的条件执行 107
6．2．3 副作用的清理函数 109
6．3 项目实现：在oh-my-chat加入副作用 110
6．3．1 项目实现：利用副作用读取远程消息 110
6．3．2 项目实现：显示发送消息的相对时间 114
6．3．3 项目实现：自动滚动到消息列表末尾 116
6．4 开发模式下的useEffect 117
6．4．1 依赖项数组的静态检查 117
6．4．2 为什么副作用会被触发两次 118
6．5 小结 118
第7章 事件处理 119
7．1 React合成事件 120
7．2 合成事件
