2024肥晨赠书活动第二期：《深入浅出React开发指南》

---

内容简介

本书讲述了React各个模块基础和进阶用法，并提供了相应的案例。还深入分析了React内部运转机制，同时详细介绍了React配套的生态系统。本书共14章，包括邂逅React、了解JSX、React组件、React更新驱动、React生命周期、React状态获取与传递、工程化配置及跨平台开发、React架构设计、高性能React、React运行时原理探秘、玩转React Hooks、React-Router、React-Redux状态管理工具和React实践。

本书从多个方面深度探究了React的相关能力，让你更加全面地理解React的用法和原理。不仅如此，本书还融入了作者丰富的实践经验和优化技巧，指导读者深入React，构建完善的React知识体系。无论是初学者还是React达人，都可以从本书中获得有用的知识和启发。比如可以学习到React虚拟DOM、组件生命周期、高阶组件等核心概念，也可以学习到Redux等流行的状态管理方案，以及这些核心内容背后的设计思想。这是一本值得一读的React宝典。

本书适合具有一定React开发基础，但希望更加全面、深入理解React的前端开发者阅读。

作者简介

赵林林，网名外星人，现任美团前端开发工程师，技术专家，热爱前端技术，掘金、知乎技术博主，精通React技术，擅长React Native、小程序等跨端开发、大型应用架构设计、C端性能优化等领域。

关于《深入浅出React开发指南》

接下来给大家推荐一本关于前端开发React领域的书籍，具体信息如下所示。另外，在本文文末评论区评论“我要入门深入浅出React开发指南”，将选取两名幸运读者送出纸质版《深入浅出React开发指南》一本，截止时间：2024.02.25。

本书适合了解React基础语法，接触过React技术栈的前端开发者、JavaScript开发者，如果想要系统学习React，进阶学习React技术栈，深入了解React运转机制，那么这本书是一个不错的选择。

“路漫漫其修远兮，吾将上下而求索”，希望阅读这本书的每一位读者，不要把掌握书中的知识点作为学习React的终点，而是要把它当成学习的起点，带着对React全新的认识去使用，在平时的工作中要多练习，多学习一些React设计模式，多写一些自定义 Hooks，尝试写一些高阶组件。在 React 技术成长之路上披荆斩棘，勇往直前！

入手《深入浅出React开发指南》传送门：https://item.jd.com/14000862.html，个人觉得这本书非常的不错，尤其是对于前端开发者来讲，是一本不可多得的好书，值得拥有去学习。

文章目录

前言

第1章 邂逅React/

1.1React的优势分析/

1.2React 发展历程/

第2章 了解JSX/

2.1认识JSX/

2.1.1JSX是什么/

2.1.2React.createElement/

2.1.3JSX 转换逻辑/

2.1.4ReactElement对象/

2.2操作JSX/

2.2.1JSX与Element对象/

2.2.2Element方法集/

2.2.3Element对象持久化/

2.3JSX转换Element对象流程/

2.3.1createElement原理揭秘/

2.3.2cloneElement原理揭秘/

2.4实践：可控性渲染/

2.5Babel解析JSX/

2.5.1Babel插件/

2.5.2API层面模拟实现/

第3章 React组件/

3.1组件是什么/

3.1.1组件的定义/

3.1.2组件的特性/

3.2两种类型的组件/

3.2.1类组件/

3.2.2函数组件/

3.3组件的通信方式/

3.3.1props和callback方式/

3.3.2eventBus事件总线/

3.3.3其他方式/

3.4组件的设计模式/

3.5组件的继承/

3.5.1继承模式的介绍/

3.5.2继承模式实践：编写权限路由/

3.6高阶组件（HOC）/

3.6.1什么是高阶组件/

3.6.2高阶组件解决了什么问题/

3.6.3高阶组件之属性代理/

3.6.4高阶组件之反向继承/

3.6.5高阶组件功能/

3.6.6高阶组件注意事项/

3.6.7高阶组件实践：渲染分片/

3.6.8高阶组件功能总结/

第4章 React更新驱动/

4.1React 驱动源/

4.1.1谁在驱动React更新/

4.1.2React更新流/

4.2React props/

4.2.1props的概念及作用/

4.2.2props 的使用技巧/

4.3组合模式和 render props 模式/

4.3.1组合模式/

4.3.2实践：组合模式实现tab和tabItem/

4.3.3render props模式/

4.4State驱动/

4.4.1类组件setState介绍/

4.4.2函数组件中的useState/

4.5主流框架批量更新模式/

4.5.1宏任务和微任务/

4.5.2微任务｜宏任务实现批量更新/

4.5.3可控任务实现批量更新/

4.6两种模式下的State更新/

4.6.1legacy模式和concurrent模式/

4.6.2老版本legacy模式下的更新/

4.6.3新版本concurrent模式下的更新/

4.6.4flushSync提高优先级/

4.7外部数据源/

4.7.1什么是外部数据源/

4.7.2useSyncExternalStore介绍/

4.7.3useSyncExternalStore原理及其模拟/

第5章 React生命周期/

5.1生命周期介绍/

5.1.1生命周期意义及两大阶段/

5.1.2React生命周期及其特点/

5.2类组件生命周期/

5.2.1类组件初始化流程及其生命周期/

5.2.2类组件更新流程及其生命周期/

5.2.3类组件销毁流程及其生命周期/

5.2.4commit阶段细节补充/

5.3类组件生命周期的作用/

5.3.1类组件生命周期能做些什么/

5.3.2类组件渲染错误边界/

5.4函数组件生命周期替代方案/

5.4.1useEffect和useLayoutEffect/

5.4.2useInsertionEffect/

5.4.3生命周期替代方案/

5.5实践：实现ScrollView组件/

第6章 React状态获取与传递/

6.1ref 对象介绍/

6.2ref 使用及应用场景/

6.2.1ref 的使用/

6.2.2forwardref 转发ref/

6.2.3ref 其他应用场景/

6.3Context 介绍/

6.3.1什么是Context/

6.3.2Context 解决了什么问题/

6.4新老版本Context/

6.4.1老版本Context/

6.4.2新版本Context/

6.4.3动态Context/

6.5Context 特性/

6.5.1嵌套多个Context/

6.5.2逐层传递Provider/

6.6Context实现切换主题功能/

第7章 工程化配置及跨平台开发/

7.1React 环境搭建/

7.1.1环境搭建/

7.1.2create-react-app创建项目/

7.2CSS模块化/

7.2.1为什么要用CSS模块化/

7.2.2CSS模块化之CSS Modules/

7.2.3CSS模块化之CSS IN JS/

7.2.4CSS模块化总结/

7.3React服务端渲染/

7.3.1React SSR流程分析/

7.3.2React SSR框架Next.js/

7.4React Native跨平台开发/

7.4.1从JS引擎到JSI/

7.4.2React Native简介/

第8章 React架构设计/

8.1虚拟DOM与fiber/

8.1.1虚拟DOM/

8.1.2React fiber/

8.2fiber架构/

8.2.1fiber树的构成/

8.2.2fiber树的创建流程/

8.2.3fiber树的更新流程/

8.3React中的位运算/

8.3.1为什么要用位运算/

8.3.2React位掩码场景——更新优先级/

8.3.3React位掩码场景——更新上下文/

8.3.4React位掩码场景——更新标识/

8.4React数据更新架构设计/

8.4.1React更新前置设计/

8.4.2React更新后置设计/

8.5React事件系统设计/

8.5.1React事件系统介绍/

8.5.2事件系统设计/

8.5.3新老版本事件系统差异/

第9章 高性能React/

9.1React内部更新调优/

9.1.1调和优化手段/

9.1.2diff算法/

9.2React外部渲染控制/

9.2.1React渲染本质/

9.2.2React渲染控制手段/

9.2.3对React渲染的思考/

9.3任务调度/

9.3.1为什么要使用异步调度/

9.3.2Scheduler核心实现/

9.4过渡更新任务/

9.4.1Transition使命/

9.4.2Transition模拟场景/

9.4.3Transition具体实现/

9.4.4Transition实现原理/

9.5异步组件和懒加载/

9.5.1异步组件和Suspense/

9.5.2Suspense实现懒加载/

9.5.3Suspense和React.lazy原理实现/

9.5.4React V18 SuspenseList/

9.5.5hydrate模式下的Suspense新特性/

9.5.6Suspense未来可期/

9.6React海量数据处理/

9.6.1渲染切片/

9.6.2长列表优化方案/

9.7React使用细节处理/

9.7.1React中的防抖和节流/

9.7.2React中的动画/

9.7.3在React中防止内存泄露/

9.7.4在React中合理使用状态/

9.8React性能问题检测/

9.8.1Profiler性能检测工具/

9.8.2StrictMode严格模式/

9.8.3调试工具react-devtools/

第10章 React运行时原理探秘/

10.1React运行时总览/

10.1.1初始化流程/

10.1.2更新流程/

10.1.3更新入口scheduleUpdateOnFiber/

10.1.4更新准备工作：标记ChildLanes /

10.1.5开始更新：两大阶段渲染和commit /

10.2渲染阶段流程探秘/

10.2.1fiber更新循环workLoop/

10.2.2最小的更新单元/

10.2.3从beginWork到组件更新全流程/

10.2.4completeWork阶段细节/

10.3Commit阶段流程探秘/

10.3.1更新标志/

10.3.2beforeMutation阶段/

10.3.3mutation阶段/

10.3.4layout阶段/

10.4State更新揭秘/

10.4.1React批量更新原理/

10.4.2legacy模式更新流程/

10.4.3Concurrent模式更新流程/

10.5Context原理揭秘/

10.5.1Context对象的本质/

10.5.2Provider（提供者）/

10.5.3Context更新流程/

10.5.4Consumer、useContext和contextType/

10.5.5Context流程总结/

10.6ref原理揭秘/

10.6.1ref的处理时机和逻辑/

10.6.2ref的处理特性/

10.7scheduler异步调度原理/

10.7.1进入调度scheduleCallback/

10.7.2Concurrent模式如何中断渲染/

10.8React事件原理/

10.8.1新版本事件系统核心实现/

10.8.2老版本事件系统原理差异/

第11章 玩转React Hooks/

11.1Hooks 概览/

11.1.1数据更新驱动/

11.1.2执行副作用/

11.1.3状态的获取与传递/

11.1.4状态的派生与保存/

11.1.5工具Hooks/

11.2Hooks原理/

11.2.1Hooks与fiber/

11.2.2renderWithHooks执行函数/

11.2.3Hooks初始化流程/

11.2.4Hooks更新流程/

11.3自定义Hooks设计/

11.3.1全面理解自定义Hooks/

11.3.2自定义Hooks设计角度分析/

11.4自定义Hooks实践/

11.4.1实践一：自动上报pv/click的埋点/

11.4.2实践二：带查询分页加载的长列表/

11.4.3实践三：Hooks实现React-Redux/

第12章 React-Router/

12.1Spa核心原理/

12.1.1核心原理/

12.1.2History库核心实现/

12.1.3History原理总结/

12.2新老版本路由设计/

12.2.1React-Router核心组成部分/

12.2.2React-Router使用指南/

12.2.3自定义路由及其实践/

12.2.4新版React-Router V6/

12.3老版本路由原理/

12.4新版本路由原理/

12.4.1React-Router V6核心原理/

12.4.2新老版本对比/

12.5实践：从零到一实现路由系统/

12.5.1设计思想/

12.5.2代码实现/

12.5.3验证效果/

第13章 React-Redux状态管理工具/

13.1Redux /

13.1.1Flux架构概念/

13.1.2Redux介绍/

13.2Redux原理浅析/

13.2.1Redux核心API的实现/

13.2.2中间件原理/

13.3React-Redux介绍及其原理/

13.3.1React-Redux介绍/

13.3.2React-Redux实践/

13.3.3React-Redux原理/

第14章 React实践/

14.1实现表单系统/

14.1.1表单设计思路/

14.1.2表单逻辑状态层/

14.1.3表单UI层/

14.1.4功能验证/

14.2弹窗设计与实践/

14.2.1设计思路/

14.2.2代码实现及功能验证/

14.3Keepalive功能的设计与实践/

14.3.1背景：React新属性offScreen/

14.3.2设计思想/

14.3.3架构设计/

14.3.4具体实现最终呈现的Demo效果/
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547

这本书讲了什么？

相信对于很多前端开发者来说，React库并不陌生，很多前端开发者用React作为核心框架构建前端应用，但在周而复始的项目迭代过程中，难免会遇到技术的瓶颈期。这可能来源于：对于一些复杂的模块，不知道怎样更优雅、更灵活、更有拓展性地去实现；怎样给React做性能优化、封装组件；对于React技术栈，不知道该怎样突破、进阶；搞不懂 React 的运行机制；笔者就曾经历过这样的迷茫期，后来通过系统化复习，先逐一突破React的各个模块，再把各个模块串联到一起，才慢慢体验到React的魅力，深入学习后，笔者发现了更多精彩的内容。

写这本书的目的就是把自己得到的经验分享给大家，希望大家在深入学习React的过程中，能将本书作为React学习的指南。下面是每一章的介绍。

在第1章中，将介绍目前React的地位和优势，以及React到底能解决什么问题。

在第2章中，将从JSX入手，介绍React表现形式，以及操作React Element对象，更方便地运用React，为深入React设计模式做技术铺垫。

在第3章中，将重点介绍两种类型的React组件，以及它们的特点、用法、通信方式、强化方式、高阶组件的使用，让开发者对React组件有一个更全面的认识。

在第4章中，会从驱动更新的源头——props和State说起，介绍State更新的特点，props的灵活使用，以及组合模式和render props模式。同时还会分析新老版本 React 的更新模式及更新特点，让读者更清晰地明确React更新流程。

在第5章中，将介绍React 生命周期的奥秘。在生命周期中，开发者到底能做什么事，应该做什么事；函数组件如何弥补没有生命周期的缺陷。

在第6章中，会讲到如何获取并传递状态，ref和Context的基本使用及高阶用法，让状态的获取和传递更加灵活自由。

在第7章中，会讲到工程化配置、CSS模块化、React 在服务端渲染和跨平台开发中的地位，以及React 在多个技术方向上的优势。

在第8章中，将重点介绍React 架构设计，从虚拟DOM到更新的设计，再到事件系统的设计，让读者知其然，知其所以然，真正理解React 为什么要这样设计。

在第9章中，将从多个角度分析如何打造高性能的React 应用，从多个方面研究React优化手段。

在第10章中，将以应用初始化和应用更新为切入点，进入React应用内部，探索React内部的运转机制，从点到线再到面，全面解析React原理。

在第11章中，将介绍目前React V18版本的所有Hooks，以及基本用法和应用场景，揭秘Hooks原理，以及如何设计一个自定义Hooks。

在第12章中，将以单页面路由原理为起点，分析 React 中的路由是如何使用和实现的，以及新老版本路由的差异。

在第13章中，会介绍React中的状态管理工具：Redux等，以及它们是如何运转的，如何与React应用完美契合的。

在第14章中，将用三个实践来串联前面的知识点，通过实践来提升 React 的使用技巧，做到学以致用。

本书从基础用法入手，到深入原理，再到项目实践，从多个维度深入了解React，笔者相信，更深入的理解是为了使用更加便捷。

深入浅出React开发指南本书在讲解React基础和进阶用法原理的基础上，也提供了很多小的案例，对基础知识点进行巩固和强化。

《深入浅出React开发指南》全书速览

入手《深入浅出React开发指南》传送门：https://item.jd.com/14000862.html，个人觉得这本书非常的不错，尤其是对于前端开发者来讲，是一本不可多得的好书，值得拥有去学习。

结束语

因为Web应用的发展，响应式框架在近几年流行起来，它们适用于大多数经典的Web应用场景，React正是其中的佼佼者。但正如以前jQuery的流行一样，我发现很多使用者知其然而不知其所以然，这样使用它必然会遇到瓶颈，而这本书不仅系统地介绍了React的使用技巧，更重要的是阐述了React的设计思想，便于读者理解和融会贯通，真正做到知其然亦知其所以然。

前端生态越来越成熟，而配套的书籍与资料依然比较缺乏，本书作者结合React概念，分章节逐步展开，浅显易懂，比较适合前端新人学习，值得一读。

本书内容十分丰富，涵盖学习React的基础知识、进阶知识、技术原理，以及实战应用。书中知识点覆盖面广，能满足不同层次读者的需求。此外，本书使用的React版本，为读者提供了React开发经验和实用技巧。如果你渴望系统学习React技术，这本书将是最佳选择。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机