第1章 Hello,World！ 1
1.1 在没有工具链的情况下
如何使用React 1
1.2 使用Create React App
和JSX创建交互式
“Hello,World”应用程序 6
1.3 本章小结 7
第2章 React基础 9
2.1 React名称的由来 9
2.2 UI层 10
2.3 虚拟DOM 11
2.4 React的原理 12
2.4.1 关于组件 12
2.4.2 组合与继承 13
2.4.3 React是声明式的 13
2.4.4 React是惯用语 14
2.4.5 为什么要学习React 15
2.4.6 React与其他框架的
比较 15
2.4.7 React不是什么 17
2.5 本章小结 18
第3章 JSX 21
3.1 JSX不是HTML 21
3.2 什么是JSX 26
3.2.1 JSX的工作方式 26
3.2.2 转译器 28
3.3 JSX的语法基础 29
3.3.1 JSX是JavaScript XML 29
3.3.2 避免使用保留字 30
3.3.3 JSX使用驼峰式命
名法 30
3.3.4 为DOM元素中的自定义
属性加上data-前缀 30
3.3.5 JSX布尔属性 31
3.3.6 使用花括号包含
JavaScript字面量 31
3.3.7 何时在JSX中使用
JavaScript 32
3.3.8 JSX中的条件 32
3.3.9 JSX中的表达式 34
3.3.10 在JSX中使用子
元素 35
3.3.11 React Fragment 36
3.3.12 本章小结 37
第4章 组件 39
4.1 什么是组件 39
4.2 组件和元素 40
4.2.1 组件定义元素 40
4.2.2 元素调用组件 41
4.3 内置组件 42
4.3.1 HTML元素组件 42
4.3.2 Attributes和Props 46
4.4 用户定义的组件 50
4.5 组件类型 51
4.5.1 类组件 51
4.5.2 逐步了解React类
组件 60
4.5.3 函数组件 67
4.5.4 函数组件和类组件的
区别 75
4.6 React子组件 75
4.6.1 this.props.children 75
4.6.2 Children的用法 76
4.7 组件的生命周期 79
4.7.1 挂载 79
4.7.2 更新 80
4.7.3 卸载 82
4.7.4 错误处理 82
4.7.5 提高性能并避免错误 82
4.8 渲染组件 87
4.8.1 用ReactDOM渲染 87
4.8.2 虚拟DOM 88
4.8.3 其他渲染引擎 89
4.9 组件的术语 91
4.10 本章小结 92
第5章 React DevTools 93
5.1 安装和入门 93
5.2 检查组件 95
5.2.1 使用组件树 96
5.2.2 搜索组件 97
5.2.3 筛选组件 99
5.2.4 选择组件 100
5.3 在DevTools中编辑组件
数据 101
5.4 使用额外的DevTools
功能 103
5.5 性能分析 104
5.6 本章小结 106
第6章 React数据流 107
6.1 单向数据流 107
6.1.1 理解单向数据流 108
6.1.2 为什么使用单向
数据流 109
6.2 Props 110
6.2.1 组件接收Props 110
6.2.2 Props可以是任何数据
类型 110
6.2.3 Props是只读的 111
6.2.4 使用PropType验证
传入的Props 112
6.2.5 默认Props 123
6.3 ReactState 127
6.3.1 什么是state 127
6.3.2 初始化state 127
6.3.3 state和props的区别 130
6.3.4 更新状态 130
6.3.5 状态中应包含的
内容 140
6.3.6 构建Reminders应用
程序 141
6.3.7 状态中不应包含的
内容 147
6.3.8 放置状态的位置 147
6.3.9 状态提升 148
6.3.10 关于key Prop 154
6.3.11 筛选提醒 160
6.3.12 实现isComplete
更改功能 164
6.4 转换为类组件 166
6.5 本章小结 173
第7章 事件 175
7.1 React中事件的运行
机制 175
7.2 什么是SyntheticEvent 177
7.3 使用事件侦听器属性 178
7.4 Event对象 178
7.5 支持的事件 180
7.6 事件处理函数 184
7.6.1 编写内联事件处理
程序 184
7.6.2 在函数组件中编写
事件处理程序 185
7.6.3 在类组件中编写
事件处理程序 186
7.6.4 绑定事件处理程序
函数 187
7.6.5 将数据传递给
事件处理程序 190
7.7 本章小结 191
第8章 表单 193
8.1 表单具有状态 193
8.2 受控输入与非受控输入 194
8.2.1 更新受控输入 195
8.2.2 控制函数组件中的
输入 195
8.2.3 控制类组件中的输入 196
8.3 提升输入状态 197
8.4 使用非受控输入 199
8.5 使用不同的表单元素 200
8.5.1 控制input元素 200
8.5.2 控制textarea元素 201
8.5.3 控制select元素 201
8.6 阻止默认操作 202
8.7 本章小结 203
第9章 ref 205
9.1 什么是ref 205
9.2 如何在类组件中
创建ref 206
9.3 如何在函数组件中
创建ref 206
9.4 使用ref 206
9.5 创建回调ref 208
9.6 何时应使用ref 209
9.7 何时不应使用ref 210
9.8 示例 210
9.8.1 管理焦点 210
9.8.2 自动选择文本 210
9.8.3 控制媒体播放 212
9.8.4 设置滚动位置 212
9.9 本章小结 213
第10章 样式化React 215
10.1 样式的重要性 215
10.2 将CSS导入HTML
文件 216
10.3 在组件中使用普通的旧
CSS 216
10.4 编写内联样式 218
10.4.1 JavaScript样式
语法 219
10.4.2 为什么使用内联
样式 220
10.4.3 为什么不使用内联
样式 220
10.4.4 使用样式模块改进
内联样式 220
10.5 CSS模块 221
10.5.1 命名CSS模块
文件 222
10.5.2 高级CSS模块
功能 223
10.6 CSS-IN-JS和样式化
组件 224
10.7 本章小结 226
第11章 hook介绍 227
11.1 什么是hook 227
11.2 为什么要引入hook 227
11.3 使用hook的规则 228
11.4 内置hook 229
11.4.1 使用useState管理
状态 229
11.4.2 使用useEffect链入
生命周期 233
11.4.3 使用useContext订阅
全局数据 240
11.4.4 将逻辑和状态与
useReducer相结合 241
11.4.5 使用useCallback缓存
回调函数 242
11.4.6 使用useMemo缓存
计算值 245
11.4.7 使用useRef访问
子对象 246
11.4.8 使用useImperativeHandle
自定义公开值 247
11.4.9 使用useLayoutEffect
同步更新DOM 248
11.5 编写自定义hook 248
11.6 使用UseDebugValue标记
自定义hook 250
11.7 查找并使用自定义
hook 252
11.7.1 use-http 252
11.7.2 react-fetch-hook 252
11.7.3 axios-hook 252
11.7.4 react-hook-form 253
11.7.5 @rehooks/local-
storage 253
11.7.6 use-local-storage-
state 254
11.7.7 其他有趣的hook 254
11.7.8 hook列表 254
11.8 本章小结 254
第12章 路由 257
12.1 什么是路由 257
12.2 React中路由的用法 259
12.3 使用React Router 260
12.3.1 安装并导入
react-router-dom 260
12.3.2 路由器组件 261
12.3.3 链接到路由 263
12.3.4 创建路由 268
12.3.5 location、history和
match对象 274
12.4 React Router hook 280
12.4.1 useHistory 281
12.4.2 useLocation 281
12.4.3 useParams 281
12.4.4 useRouteMatch 281
12.5 本章小结 281
第13章 错误边界 283
13.1 锦囊妙计 283
13.2 什么是错误边界 284
13.3 实现错误边界 286
13.3.1 构建自己的
ErrorBoundary组件 286
13.3.2 安装预先构建的
ErrorBoundary组件 295
13.4 错误边界无法捕获的
错误 296
13.4.1 使用try/catch捕获
错误边界中的错误 296
13.4.2 使用react-error-boundary
捕获事件处理程序中的
错误 297
13.5 本章小结 298
第14章 部署React 299
14.1 什么是部署 299
14.2 构建应用程序 299
14.2.1 运行build脚本 300
14.2.2 检查build目录 300
14.2.3 filenames的由来 302
14.3 部署的应用程序有何
不同 303
14.4 开发模式与生产模式 303
14.5 发布到Web上 304
14.5.1 Web服务器托管 304
14.5.2 节点托管 304
14.5.3 使用Netlify进行
部署 305
14.6 本章小结 308
第15章 从头开始初始化React
项目 309
15.1 构建自己的工具链 309
15.1.1 初始化项目 310
15.1.2 HTML文档 310
15.1.3 主JavaScript文件 311
15.1.4 根组件 311
15.1.5 在浏览器中运行 312
15.2 Webpack的工作原理 315
15.2.1 加载器 315
15.2.2 插件 315
15.3 自动化构建过程 316
15.3.1 制作HTML模板 316
15.3.2 开发服务器和热
重载 317
15.3.3 测试工具 317
15.3.4 创建npm脚本 321
15.4 构建源目录 322
15.4.1 按文件类型分组 322
15.4.2 按功能分组 323
15.5 本章小结 323
第16章 获取和缓存数据 325
16.1 异步代码：与时间
有关 325
16.2 JavaScript永不休眠 326
16.3 在React中如何运行异步
代码 329
16.4 获取数据的方法 331
16.5 使用Fetch获取数据 332
16.6 使用axios获取数据 332
16.7 使用Web Storage 334
16.7.1 Web Storage的两个
属性 334
16.7.2 何时使用
Web Storage 335
16.7.3 何时不使用
Web Storage 335
16.7.4 Web Storage是
同步的 335
16.7.5 使用localStorage的
示例 336
16.7.6 使用localStorage
存储数据 336
16.7.7 从localStorage
读取数据 337
16.7.8 从localStorage中
删除数据 339
16.8 本章小结 339
第17章 Context API 341
17.1 什么是prop drilling 341
17.2 Context API如何解决
问题 342
17.2.1 创建Context 342
17.2.2 创建Provider 343
17.2.3 使用Context 343
17.3 Context的常见用例 345
17.4 不适用Context的情况 345
17.5 合成模式作为Context的
替代方案 346
17.6 示例应用程序：用户偏好
设置 349
17.7 本章小结 351
第18章 React Portal 353
18.1 什么是Portal 353
18.1.1 如何创建Portal 353
18.1.2 为什么不直接渲染
多个组件树 356
18.2 常见用例 357
18.2.1 模态对话框的渲染与
交互 357
18.2.2 使用模态管理键盘
焦点 362
18.3 本章小结 363
第19章 React中的无障碍性 365
19.1 为什么无障碍性
很重要 365
19.2 无障碍性基础 366
19.2.1 Web内容无障碍性
指南(WCAG) 366
19.2.2 Web无障碍计划-无障碍
富互联网应用程序
(WAI-ARIA) 367
19.3 在React组件中实现无障
碍性 367
19.3.1 React中的ARIA
属性 367
19.3.2 语义化的HTML 368
19.3.3 表单无障碍性 369
19.3.4 React中的焦点
控制 369
19.3.5 React中的媒体
查询 371
19.4 本章小结 373
第20章 高级主题 375
20.1 测试 375
20.1.1 Mocha 376
20.1.2 Enzyme 376
20.1.3 Chai 377
20.2 服务器端渲染 379
20.2.1 Flux 380
20.2.2 Redux 380
20.2.3 GraphQL 382
20.2.4 Apollo 383
20.2.5 React Native 383
20.2.6 Next.js 384
20.2.7 Gatsby 384
20.3 需要关注的人 384
20.4 有用的链接和资源 385
20.5 本章小结 385
鄂公网安备 42010302001612号 