React学习手册（第二版）

前言本书是为那些想学习React 库，以及想学习当前JavaScript 语言技术的开发人员而写的。当下是JavaScript 开发者的黄金时代，整个生态系统蓬勃发展，不断涌现新工具、句法和实践，以期解决开发中遇到的很多问题。笔者写这本书旨在整合相关技术，让你顺利掌握React。本书涵盖状态管理、React 路由、测试和服务器端渲染，不仅介绍基础知识，还将进行实战演练。阅读本书不要求你事先了解React 的任何知识。笔者将从头开始介绍React 的基础知识。同样，也不要求你用过的JavaScript 句法。这部分知识在第2 章介绍，作为后续章节的基础。如果你熟悉HTML、CSS 和JavaScript，阅读本书就没有什么障碍。专攻一个JavaScript 库时，熟悉这三大技术总是好的。在阅读本书的过程中，请随时查阅配套的GitHub 仓库（http://github.com/moonhighway/learning-react）。本书的所有示例都在这个仓库中，你可以自己动手实践。排版约定本书采用下述排版约定。斜体（Italic）表示新术语、URL、电子邮件地址、文件名和扩展名。等宽字体（Constant Width）表示程序清单，在段落中出现则表示程序元素，例如变量、函数名、数据库、数据类型、环境变量、语句和关键字。斜体等宽字体（Constant Width Italic）表示应该由用户原封不动输入的命令或其他文本。使用代码示例本书的补充材料（代码示例、练习题等）可到https://github.com/moonhighway/learning-react 下载。如有技术疑问，或者在使用代码示例的过程中遇到问题，请发电子邮件到bookquestions@oreilly.com。本书是帮你完成工作的。一般来说，如果本书提供了示例代码，你可以把它用到你的程序或文档中。除非你使用了很大一部分代码，否则无须联系我们获得许可。比如，用书中的几个代码片段写一个程序就无须获得许可，销售或分发O’Reilly 旗下书中的示例则需要获得许可；引用书中的示例代码回答问题无须获得许可，将书中大量的代码放到你的产品文档中则需要获得许可。我们很希望但并不强制要求你在引用本书内容时加上引用说明。引用说明一般包括书名、作者、出版社和ISBN，比如：“Learning React by Alex Banks and Eve Porcello (O’Reilly). Copyright 2020 Alex Banks and Eve Porcello, 978-1-492-05172-5.”。如果你觉得自己对示例代码的使用超出了上述许可范围，请通过permissions@oreilly.com 与我们联系。O’Reilly Online Learning40 年间，O’Reilly Media 为众多公司提供技术和商业培训，提升知识储备和洞察力，为企业的成功助力。我们有一群独家专家和创新者，他们通过图书、文章、会议和在线学习平台分享知识和技术。O’Reilly 的在线学习平台提供按需访问的直播培训课程、详细的学习路径、交互式编程环境，以及由O’Reilly 和其他200 多家出版社出版的书籍和视频。详情请访问http://oreilly.com。联系方式请将你对本书的评价和问题发给出版社：美国：O’Reilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, CA 95472O’Reilly Online LearningFor more than 40 years, O’Reilly Media has provided technology and business training, knowledge, and insight to help companies succeed.Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200 other publishers. For more information, visit http://oreilly.com.How to Contact UsPlease address comments and questions concerning this book to the publisher:O’Reilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, CA 95472800-998-9938 (in the United States or Canada)707-829-0515 (international or local)707-829-0104 (fax)We have a web page for this book中国：北京市西城区西直门南大街2 号成铭大厦C 座807 室（100035）奥莱利技术咨询（北京）有限公司勘误、示例和其他信息可到https://oreil.ly/learningReact_2e 上获取。对本书的评论或技术疑问，可以发电子邮件到bookquestions@oreilly.com。欲了解本社图书、课程、会议和新闻等更多信息，请访问我们的网站http://oreilly.com。我们的Facebook：http://facebook.com/oreilly。我们的Twitter：http://twitter.com/oreillymedia。我们的YouTube：http://www.youtube.com/oreillymedia。致谢笔者接触React 纯粹是机缘巧合。为Yahoo 内部的一个JavaScript 全栈培训项目编写材料时，笔者用的是YUI，然而在2014 年8 月，YUI 终止开发了。我们不得不修改所有课程文件，可是改成什么呢？现在前端应该使用什么呢？答案是React。我们没有立即喜欢上React，几个小时之后才被它吸引。当时我们猜测，React 将产生翻天覆地的影响。非常幸运，我们在早期就选定了它。感谢Angela Rufino 和Jennifer Pollock 对本书第二版的帮助和支持。同时，感谢Ally MacDonald 对版的编辑工作。感谢几位技术审校：Scott Iwako、Adam Rackis、Brian Sletten、Max Firtman 和Chetan Karande。没有Sharon Adams 和Marilyn Messineo，这本书不可能得以存世。Alex 的台电脑，一台Tandy TRS 80 彩色计算机就是他们二人合买的。倘若没有Jim 和Lorri Porcello 及Mike 和Sharon Adams 的关爱、支持和鼓励，本书不会终得以付梓。我们还要感谢加利福尼亚州Tahoe 市的Connexion 咖啡馆，感谢这家店为我们供应完成本书所需的咖啡。同时感谢店主Robin，他的鞭策给了我们无限动力：“写一本编程书？听着就无聊！”

• 理解JavaScript函数式编程的关键概念。
• 深入了解React在浏览器中的运行机制。
• 使用React组件创建应用的表现层。
• 管理数据，减少花在调试应用上的时间。
• 利用React钩子管理状态及获取数据。
• 在单页应用中使用路由方案。
• 学习站在服务器的角度上规划React应用。

Alex Banks和Eve Porcello是软件工程师、作者和培训讲师。他们合办的公司Moon Highway向全世界的工程开发人员教授JavaScript、Node.js、React和GraphQL课程。他们还为O’Reilly、LinkedIn Learning和egghead.io录制视频及编写培训材料。

目录
前言 1
第1 章 初识React 7
11 坚实的基础 8
12 React 的过去和未来 9
13 资源文件 10
131 资源仓库10
132 React 开发者工具 10
133 安装Nodejs 12
第2 章 JavaScript 新特性 15
21 声明变量 16
211 const 关键字 16
212 let 关键字 17
213 模板字符串 20
22 创建函数 21
221 函数声明21
222 函数表达式 22
223 默认参数24
224 箭头函数25
23 编译JavaScript 28
24 对象和数组 29
241 析构对象29
242 析构数组32
243 对象字面量增强 32
244 展开运算符 34
25 JavaScript 异步编程 36
251 使用fetch 处理简单的promise 37
252 async/await 38
253 构建promise 39
26 类 40
27 ES6 模块 42
第3 章 JavaScript 函数式编程 45
31 函数式编程是什么意思 46
32 命令式和声明式 48
33 函数式编程基本概念 51
331 不可变性51
332 纯函数 54
333 数据转换57
334 高阶函数65
335 递归 66
336 合成 70
337 综合应用71
第4 章 React 运行机制 77
41 页面设置 77
42 React 元素 78
43 ReactDOM 81
44 React 组件 87
第5 章 在React 中使用JSX 95
51 使用JSX 创建React 元素95
511 JSX 小贴士 96
512 使用JSX 映射数组 98
52 Babel 98
53 使用JSX 编写菜谱应用 100
54 React 片段 108
55 webpack 简介 109
551 创建项目 111
552 加载构建包 122
553 源码映射123
554 Create React App 124
第6 章 React 状态管理 127
61 构建一个星级评价组件 128
62 useState 钩子 130
63 为提高可重用性而重构 134
64 组件树中的状态 136
641 沿组件树向下发送状态 137
642 沿组件树向上发送交互 141
65 构建表单 145
651 使用ref 146
652 受控组件148
653 自定义钩子 150
654 把颜色添加到状态中 152
66 React 上下文 153
661 把颜色放入上下文 155
662 使用useContext 获取颜色 157
663 有状态的上下文供应组件 158
664 使用上下文自定义钩子 160
第7 章 使用钩子增强组件 165
71 useEffect 介绍 165
711 依赖数组168
712 深入检查依赖 173
713 何时使用useLayoutEffect 180
714 钩子使用规则 182
715 使用useReducer 改进代码 186
716 使用useReducer 处理复杂的状态 189
717 提升组件性能 192
718 shouldComponentUpdate 和PureComponent 195
719 何时重构196
第8 章 处理数据 199
81 请求数据 199
811 随请求发送数据 201
812 使用fetch 上传文件202
813 授权请求202
814 在本地保存数据 204
815 处理promise 状态 208
82 渲染属性 210
83 虚拟化列表 214
831 创建useFetch 钩子 219
832 创建Fetch 组件 222
833 处理多个请求 224
834 备忘值 225
835 瀑布式请求 229
836 限制网络速度 233
837 并行请求235
838 等待值出现 237
839 取消请求238
84 GraphQL 简介 242
841 GitHub GraphQL API 242
842 发起一个GraphQL 请求 245
第9 章 Suspense 253
91 错误边界组件 255
92 代码分拆 259
921 Suspense 组件介绍 262
922 使用Suspense 加载数据 263
923 抛出promise 267
924 构建兼容Suspense 的数据源 272
925 Fiber 277
第10 章 React 测试 281
101 ESLint 281
102 Prettier 288
1021 在项目中配置Prettier 289
1022 在VSCode 中使用Prettier 291
103 对React 应用做类型检查 292
1031 PropTypes 292
1032 Flow 296
1033 TypeScript 301
104 测试驱动开发 304
105 使用Jest 305
106 测试React 组件 311
1061 查询 315
1062 测试事件 316
1063 代码覆盖度 319
第11 章 React Router 321
111 使用React Router 322
112 React Router 属性 327
113 重定向 332
第12 章 React 服务器端渲染 341
121 同构与普适 342
122 服务器端渲染React 345
123 使用Nextjs 做服务器端渲染 353
124 Gatsby 359
125 React 未来展望 361
作者介绍 363
封面介绍 363

• 理解JavaScript函数式编程的关键概念。


• 深入了解React在浏览器中的运行机制。


• 使用React组件创建应用的表现层。


• 管理数据，减少花在调试应用上的时间。


• 利用React钩子管理状态及获取数据。


• 在单页应用中使用路由方案。


• 学习站在服务器的角度上规划React应用。

Alex Banks和Eve Porcello是软件工程师、作者和培训讲师。他们合办的公司Moon Highway向全世界的工程开发人员教授JavaScript、Node.js、React和GraphQL课程。他们还为O’Reilly、LinkedIn Learning和egghead.io录制视频及编写培训材料。