坐标React星：React核心思维模型 pdf下载

《坐标React星：React核心思维模型》通过一个奇幻故事的外壳讲解 React 开发必备的核心思维模型，即如何用 React 的独特方式思考和解决问题。

《坐标React星：React核心思维模型》为每一个思维模型都配备了生动有趣的故事桥段和漫画插图。

《坐标React星：React核心思维模型》强调揭示各个概念的本质，不光展示“如何做”，更注重解释“为什么”，并辅以实例操作，旨在打开一扇门——鼓励读者深挖基础知识，增强自行推演结论、进一步学习实战知识的能力。

《坐标React星：React核心思维模型》通过一个奇幻故事的外壳讲解 React 开发必备的核心思维模型，即如何用 React 的独特方式思考和解决问题。故事主角用脑机进入“Web 宇宙”，登陆“React 星”。通过体验各种离奇见闻，由浅入深地介绍 React 开发的核心知识点，例如声明式和响应式编程、不可变约定、单向数据流、组件组合的运用、组件渲染特性、Hook 的基本原理和常见模式、组件构架设计和State 管理，等等。“让读者在娱乐中学习”，这是作者的初衷。为了帮助读者理解和记忆，《坐标React星：React核心思维模型》为每一个思维模型都配备了生动有趣的故事桥段和漫画插图。本书强调揭示各个概念的本质，不光展示“如何做”，更注重解释“为什么”，并辅以实例操作，旨在打开一扇门――鼓励读者深挖基础知识，增强自行推演结论、进一步学习实战知识的能力。

《坐标React星：React核心思维模型》主要适合对 HTML、CSS、JavaScript、DOM 有一定了解的前端开发者、设计师和高校学生等阅读。

叶凌东

叶凌东是一名软件工程师、科普作者和创业者，React Working Group成员，致力于创新，热衷于知识分享，信奉终身学习。多年来活跃在软件工程、设计工具、开发与设计协作等领域。2017年创办 LearnReact.Design 网站，至今已经帮助了世界各地数万名设计师和前端工程师提升编程技能，包括来自谷歌、脸书、亚马逊、推特、Uber 等公司的设计师及开发者。所写文章发表于 Smashing Magazine、UX Planet、FreeCodeCamp 等业内知名网站。

Beebee

我是插画师Beebee，我经常从我的梦中获得画画的灵感。

在梦中，我看见猛犸象在追逐马戏团里骑车的小熊；我看见洲际导弹在空中绽放出璀璨的烟花；我试图说服秦始皇停止杀戮；我和爱德华王子用中文交谈；我停留在了一个奇异的地方，那里有金色的睡莲、湛蓝的水草，还有苍白的死鱼……

那么，在你的梦里面有些什么呢？

我看过引人入胜的文学宝典，也看过很多深挖技术内核的IT佳作，然而将两类书结合在一起的著作却是凤毛麟角。本书恰恰做到了，正如作者的初衷：让读者在娱乐中学习!在看科幻小说的过程中，你就能学习到React开发必备的核心思维模型。无论是巧妙的故事构思，还是美幻的插图，都会让你拍案叫绝。初学者或者高级开发开发人员阅读此书，都会有所收获!

侯策(@LucasHC)

前端开发专家、《前端开发核心知识进阶：从夯实基础到突破瓶颈》作者

说到常年热门的前端框架，毫无疑问会提到React。作为广受欢迎的前端框架之一，React以声明式、组件化的特性，备受前端从业者的青睐。本书通过“我”在“React星球”的遭遇，以丰富的插图、轻松的语言、引人入胜的故事，介绍了React的声明式UI、单向数据流、UI状态的最小表示等内容。读完本书，您将获得打开React大门的一把钥匙。无论是一位前端初学者，还是有一定工程经验的资深开发者，本书提供的React思维模型都能给您带来对交互式UI全新的认识。

李杨韬
《深入理解React Router： 从原理到实践》作者

这本书从开头就惊艳到我。作者叶凌东大胆突破技术写作的传统，以“我”和艾伦的科幻旅程为线索，以比喻或拟人等手法将React从基础到进阶各种概念、技巧巧妙地描写成旅途见闻，环环相扣，引人入胜。计算机类图书大都只强调知识点和代码，而这本书则将生动的感性剧情融入原本冷冰冰的理性逻辑之中。读者阅读每章都是享受，同时又加深了对技术本身的理解。初、中级前端开发者和所有对前端感兴趣的读者都适合阅读。另外，我很期待“吊坠”和“那个女孩”的伏笔在后文中会怎样回收。

宋一玮

FreeWheel基础架构部首席工程师

学习知识最快的方式就是类比和联想，这两种思路均贯穿于本书之中。本书有大量精心设计的内容，读完让人印象深刻。

让知识易于理解是我坚持的理念，而本书作者为内容插上了想象的翅膀，让人能够更快地领会知识。

本书思路新奇，可读性强，技术深度和结构设计精良，让读者在娱乐中学习，作者非常有心。

颜海镜

《React状态管理与同构实战》作者

第1 章　重返React 星 / 1
1．1 墙上的洞 / 2
1．1．1 上帝视角：代码例子 / 4
1．1．2 让它动起来 / 5
1．1．3 State / 7
1．1．4 模板：将数据从用户界面中分离 / 8
1．2 仪式之二 / 9
1．2．1 声明式与命令式 / 10
1．2．2 响应式 / 14
1．3 初展神迹 / 15
1．3．1 获取文本框内容 / 17
1．3．2 将新内容写回文本框 / 19
1．3．3 修复文本框 / 20
1．3．4 在 React 代码里使用 CSS 样式 / 21
1．4 拍照墙的伪装 / 23
1．4．1 JSX / 25
1．4．2 JSX 的属性 / 26
1．4．3 嵌套标签 / 26
1．4．4 _jsx 的返回值 / 28
1．4．5 原来就是一个表达式 / 28
1．4．6 理解 JSX 和 HTML 的区别 / 29
1．5 手翻书 / 31
1．6 诱饵 / 35
1．6．1 墙怪爱吃表达式 / 36
1．6．2 两种“洞” / 38
1．6．3 条件显示 / 39
1．6．4 数组 / 40
1．7 不能修葺的房子 / 42
1．7．1 不可变约定 / 43
1．7．2 State 中的对象 / 44
1．7．3 State 中的其他类型值 / 45
1．7．4 immer / 46
1．7．5 为什么要不可变 / 49
1．8 笔记强迫症 / 50

第2 章 摩组城 / 53
2．1 摩组城鸟瞰 / 55
2．1．1 自定义 JSX 标签 / 57
2．1．2 组件的写法 / 58
2．1．3 “哑”组件 / 60
2．2 组件的组合 / 61
2．2．1 包含关系 / 62
2．2．2 动态包含 / 64
2．2．3 特例化 / 66
2．2．4 组件引用 / 66
2．3 周而复始的面试 / 67
2．3．1 重复不断地渲染 / 68
2．3．2 渲染必须快 / 70
2．3．3 State 笔记本 / 70
2．3．4 异步操作不能等 / 71
2．3．5 渲染要“纯粹” / 72
2．4 传送工程师的接力 / 74
2．4．1 单向数据流 / 77
2．4．2 数据所有者和消费者 / 81
2．5 单向电梯 / 82
2．5．1 prop drilling / 85
2．5．2 Context / 87
2．5．3 prop drilling 的其他解决办法 / 88
2．6 便携式虫洞 / 88
2．6．1 从下往上传数据 / 91
2．6．2 在楼下交付文件 / 93
2．6．3 下放控制权 / 94
2．6．4 通过 Context 传递回调函数 / 94
2．6．5 JavaScript 中的回调函数 / 96
2．7 笔记 / 96

第3 章 瑞海惊魂 / 99
3．1 古典帆船 / 100
3．2 遭遇胡克船长 / 102
3．3 风向急变 / 106
3．3．1 从外部环境中“勾”回新功能 / 108
3．3．2 保存数据以备下次渲染 / 110
3．3．3 保存只读数据 / 111
3．3．4 保存可变数据，更改时触发渲染 / 113
3．3．5 保存可变数据，更改时不触发
渲染 / 118
3．4 尤日伊费克特大副 / 122
3．4．1 useEffect 的用法 / 123
3．4．2 Hook 的优越性 / 125
3．5 大副的真正职责 / 126
3．5．1 副作用（side effect） / 128
3．5．2 为何要用 useEffect 管理副作用 / 130
3．5．3 副作用同步 / 132
3．5．4 依赖数组详解 / 134
3．5．5 组件思维模型 / 137
3．5．6 事件处理器中的副作用 / 139
3．5．7 其他同步 / 141
3．6 戒律清规 / 141
3．6．1 Hook 使用规则 / 143
3．6．2 山寨 useState / 147
3．6．3 保存多个状态 / 150
3．6．4 任性违规 / 153
3．7 条件扔钩 / 158
3．7．1 有条件地使用 Hook / 159
3．7．2 分拆到子组件 / 160
3．7．3 在 Hook 内部讲条件 / 161
3．7．4 一直调用，条件使用 / 161
3．7．5 自律 / 162
3．8 铁钩特勤编队 / 163
3．8．1 自定义 Hook / 164
3．8．2 函数组合的威力 / 167
3．8．3 状态逻辑 / 169
3．9 笔记 / 171

第4 章 灵缘幻境 / 175
4．1 React 星的祈祷 / 177
4．2 项目组织结构 / 181
4．3 评判准则和实施策略 / 182
4．4 从静态出发 / 183
4．4．1 占位符 / 184
4．4．2 重复部分 / 186
4．5 文件和目录结构 / 188
4．5．1 一个组件一个文件？ / 188
4．5．2 目录结构 / 189
4．6 何时划分组件 / 190
4．7 业务逻辑 / 193
4．7．1 容器和表现层组件 / 193
4．7．2 使用自定义 Hook / 195
4．7．3 容器、表现层组件和Storybook / 197
4．8 State 管理 / 201
4．8．1 State 简化 / 201
4．8．2 提升 State / 204
4．8．3 State 放哪里 / 207
4．9 回程 / 212

第5 章 后 记 / 215
5．1 样式方案 / 217
5．2 应用框架 / 218
5．3 表单 / 218
5．4 路由 / 219
5．5 State 管理 / 220
5．6 开发辅助工具 / 222
5．7 性能优化 / 223
5．8 测试 / 225
5．9 类组件及相关 / 226
5．10 TypeScript / 227
5．11 前沿技术 / 228

推荐序

几年前在网球场上认识叶凌东，后来一起组队参加比赛，有了更深入的交流，才知道我们原来是计算机同行。只不过我现在只是教书，不再做开发，属于光说不练的空把式。叶凌东不同，他是战斗在第一线的极客，踩过商业前端开发的各种坑，深谙前端开发的灵魂。尽管经历不同，我们在计算机领域的教育理念却出乎意料的一致。作为一名教育工作者，我一直秉承的教学原则是“授人以鱼，不如授人以渔。”我尽力让学生理解一门编程语言或一项技术背后的理论基础，并鼓励他们在理解透彻基本原理的基础上灵活应用、深入学习。在这一点上，我和叶凌东不谋而合，这也正是我喜欢这本书的原因之一。

React 无疑是当下前端框架中的领导者，它尽管最初只是一款用于 Web 的界面开发库，但很快就拓展到移动端、桌面原生应用乃至虚拟现实，让人们可以“一次学习，到处开发”。React 对用户界面开发领域的深远影响不仅仅源于其直观的语法、精巧的实现、优良的性能或者脸书公司的影响力，更重要的是它建立及整合了一套关于用户界面开发的思维方法，所谓Think in React。React 的出现让人们能够从一个全新的维度思考并开发用户界面。

然而，由于思维惯性的缘故，这种新的思考方式让很多初学者感到困惑。我接触过不少尝试学习使用 React 的学生和开发者，他们当中不少人要么只是对着教程照猫画虎、知其然不知其所以然，遇到新问题就不知如何解决；要么将传统的直接操作 DOM 的编程方式混杂到 React代码中，造成其错误百出、难以维护。这一切都是源于思维模式和知识体系的缺失。而这本书的立意即是从根本上解决这个问题，在读者头脑中建立起 React 独特的思维模式，用 React 的方式去思考问题、拆分界面需求，从而高效率地解决实际问题。

当然，这些思维模式如果只是平铺直叙往往会显得抽象而枯燥。而且，要改变一个人的思维惯性、重塑脑回路谈何容易。在这点上，我尤其欣赏作者的独辟蹊径、大胆创新，以科幻小说作为载体讲述技术知识的方式，既让人耳目一新，又能使读者对书中知识点留下深刻的印象。作者文笔生动、幽默，时不时来点网络流行语言，这也契合作者所追求的目标——让读者在娱乐中学习。

这本书堪称图文并茂，书中大量有趣的插图常常让人会心一笑。不过，这些插图的作用不仅仅是增加阅读乐趣，更重要的是进一步帮助读者梳理和记忆书中的知识点。每一幅图都对应一个核心思维模式的喻义。复杂抽象的概念就这样被转换成了直观易懂的图画，比喻也用得恰到好处、让人过目不忘，比如带有钩子的胡克船长、面试时的时间循环等故事桥段。

最后，我期望广大的 React 初学者和学生朋友们能够凭借此书理解 React 的核心思想，从而更加从容地驾驭你的 React 飞船，成功踏上通往 React 元宇宙的星际之旅。

吴逵

加拿大维多利亚大学 计算机科学系教授

前言

也许我真的有自虐倾向。拿写书这件事来说吧，作为一名耕耘多年的老码农，总结一下近年来培训 React 所得的经验，中规中矩地写一本正常的技术图书，应该不算是难得离谱的事，但我偏偏不给自己喘息的机会，总是想搞点创新。

按照最初的设想，这本书将提炼出 React 最核心的思维模型，并用通俗易懂的语言加以诠释，帮助读者打好坚实的基础，以适应瞬息万变的 React 生态圈。谁知我一边写一边就踏上了不归路：硬是想将那些本来分散的概念串成一个完整自洽的故事，写一本关于 React 的小说。再说了，这是我头一次写这么长的故事！

结果就悲摧了。原本以为两三个月就可以写好初稿、半年内出版，结果从 2019 年夏天一直写到现在，快两年的痛并快乐着啊！用一条故事主线串联知识点的最大难点在于故事里的逻辑很难涵盖那些分散的概念，并且各方面的内容都要融合一致，包括故事、技术讲解、代码范例等，否则很容易造成跳出故事的感觉。而技术讲解和代码范例如果太故事化，又会显得特别冗长啰唆，这个平衡点很难找。每次想到一个关于故事的点子时，我都会莫名兴奋，恨不得马上能写完，但落实到细节又困难重重，一次又一次地被卡住，无奈只好又回到技术内容写作。就这样一个接一个地挖坑、填坑，慢慢地螺旋式迭代、上升，在拔掉了数不清的头发、密林狂奔无数次追逐缪斯女神以后，我终于找到了一个既强调技术核心、又还自认为有一定可读性的故事设计，算是基本达到了最初定下的目标——既有技术干货，阅读起来又轻松有趣。希望你看了以后也有同感。

本书内容

本书通过一个奇幻故事的外壳讲解 React 开发所必备的核心思维模型，也就是如何用 React的独特方式思考和解决问题。故事主角用脑机进入“Web 宇宙”，登陆“React 星”。通过体验主角经历的各种离奇见闻，你将由浅入深地学习如何使用 React 构建用户界面。具体来说，本书一共包括 5 章，其中的每一个小节都用一个故事桥段讲解了对应的思维模型：

• 重返 React 星：React 最基础的思维模型，包括数据与用户界面分离、声明式与命令式、响应式、JSX 及实质、React 渲染的手翻书类比和不可变约定。

• 摩组城：React 组件相关的思维模型，包括组件的写法、组件的组合、组件渲染特性、组件间的单向数据流、Context 及使用回调函数向上传递数据。

• 瑞海惊魂：React Hook 相关的思维模型，包括 Hook 的总体思路、标准 Hook 的分类整理及使用详解（覆盖 useMemo、useCallback、useState、useReducer 和 useRef）、useEffect 详解、深入理解 Hook 的使用规则、条件化使用 Hook 的常见模式及自定义Hook。

• 灵缘幻境：组件架构设计简介，包括项目组织结构（文件目录结构、何时划分组件）、评判准则和实施策略、业务逻辑管理和 State 管理。

• 后记：下一步学习内容简介，包括样式方案、应用框架、表单、路由、State 管理、第三方库、开发辅助工具、性能优化、测试、类组件、TypeScript 及前沿技术，如并行渲染和服务器组件（React Server Component）。

本书还有一个亮点，就是每一个小节末尾的漫画插图。为了帮助您进一步理解和记忆，我们的灵魂画师 Beebee 可是呕了三升老血，为每个思维模型都精心配上了漫画插图。一共 20 多幅，从讨论和确定概念、绘制草图、尝试不同风格，确定风格到最后成图，前前后后反复修改多次，总共耗时三个多月。我们还将所有的思维模型插图集中起来制作成了一张海报，糊墙、铺桌子随你，顺便还能时不时复习 React 的核心思维模型。

“让读者在娱乐中学习”，这是我们如此折磨自己的初衷。只要能博你一笑、让你有所收获，我们自虐一下也未尝不可。

目标读者群

本书主要适合对 HTML、CSS、JavaScript、DOM 有一定了解的前端开发者、设计师和学生等群体阅读。本书的目标不是成为学习者需要看的唯一一本 React 书，所以并不致力于覆盖所有相关的实战知识。相反，本书强调揭示各个概念的本质，不光展示“如何做”，更注重解释“为什么”，并辅以实例操作，旨在为读者打开一扇门：鼓励读者深挖基础知识，增强自行推演结论、进一步学习实战知识的能力。

书中代码范例

请访问 https://learnreact.design/react-mental-models-book 获取本书的代码。

致谢

感谢我的父亲，老人家多次挑灯夜战帮我改稿，很长一段时间内微信通话第一句就问我：“书写完没有？”让时不时会偷懒的我不禁汗颜。如今我终于可以舒口气告诉他：“写完了！您看。”感谢我的女儿，每当故事创意受阻无法继续时，她甘愿充当我的 rubber duck（来自 rubberduck debugging，橡皮鸭程序调试法），不厌其烦地听我重复故事内容，还积极地帮我补充新奇的点子。

我还想特别感谢电子工业出版社的宋亚东老师，正是因为他的大力推动，我才开始这本书的创作。在这快两年的时间里，他的无尽支持、悉心指导和鼓励让我在遇到困难时一次一次重拾信心、继续前进。他告诉我，“写书也是一个工程”，这让我顿悟到反复打磨一个作品的重要性，内心不再挣扎。

感谢 Dan Abramov（React 核心团队成员）和 Dave Ceddia（Pure React 一书作者）在写作初期对本书技术内容的探讨与反馈。

感谢志愿者们的意见反馈。

由于作者水平所限，书中错误及不足之处在所难免，故事的构思与文笔也未免稚嫩，望专家和广大读者批评指正。

叶凌东

2021年5月22日于加拿大维多利亚