深入浅出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 Native、小程序等跨端开发、大型应用架构设计、C端性能优化等领域。

前言

这本书讲了什么

相信对于很多前端开发者来说，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技术栈的前端开发者、JavaScript开发者，如果想要系统学习React，进阶学习React技术栈，深入了解React运转机制，那么这本书是一个不错的选择。

给读者的建议

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

勘误与支持

由于编者水平有限，书中难免有不妥之处，诚挚期盼同行、使用本书的读者给予批评和指正。如果你有什么好的建议和意见，请通过出版社及时反馈给笔者。

致谢

感谢所有支持、鼓励笔者坚持创作的朋友和粉丝们。

谨以此书，献给所有热爱React的朋友。在提升技术的道路上，我们一路同行。

前言

第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效果/