《React状态管理与同构实战》_侯策等

aixure · 发表于 2023-1-22 14:14:16

内容提要[url=]编辑[/url][url=] 播报[/url]
React自开源以来，便以革命性的设计理念迅速颠覆了前端开发的传统意义，其倡导的组件化、状态管理、虚拟DOM等思想极大提高了前端开发效率。为了更加高效地维护React应用的数据状态，以Redux为代表的数据管理模式横空出世。
《React状态管理与同构实战》以React技术栈为核心，在介绍React用法的基础上，从源码层面分析了Redux思想，同时着重介绍了服务端渲染和同构应用的架构模式。《React状态管理与同构实战》中包含许多项目实例，不仅为用户打开了React技术栈的大门，更能提升读者对前沿领域的整体认知。《React状态管理与同构实战》主要适合具有一定JavaScript基础的前端工程师，以及对前端开发感兴趣的相关从业人员阅读。

目录[url=]编辑[/url][url=] 播报[/url]
第1章 React与前端 1
1.1 前端简史 1
1.2 React是什么 3
1.3 React家族 4
1.4 本章小结 7
第2章深入浅出React 8
2.1 组件 8
2.2 组件与系统 11
2.3 神奇的JSX 12
2.4 组件的生命周期 14
2.5 组件的属性和状态 17
2.6 组件和事件 22
2.7 组件通信 24
2.8 组件的抽象与复用 32
2.9 命令式与DOM 38
2.10 本章小结 41
第3章 Redux应用架构基础 42
3.1 Redux究竟是什么 42
3.2 Redux设计哲学 44
3.3 函数式编程和纯函数 48
3.4 Redux基本使用和实践 51
3.5 Redux开发基础实例 58
3.6 reducer编写关键：不可变性 62
3.7 Redux中间件和异步 73
3.8 Redux与React 78
3.9 实现计数器的四种方式 85
3.10 完成一个工程化实例 98
3.11 本章小结 113
第4章深入理解Redux 114
4.1 Redux源码探索——store的实现 114
4.2 Redux源码探索——combineReducers的实现 118
4.3 dispatch的改造——实现记录日志 121
4.4 dispatch的改造——识别Promise 124
4.5 糅合多种dispatch 126
4.6 Redux源码探索——中间件的秘密 131
4.7 再谈Redux设计思想 136
4.8 react-redux究竟是什么 142
4.9 本章小结 145
第5章揭秘React同构应用 146
5.1 前后端架构设计和服务端渲染概念 146
5.2 同构应用 150
5.3 使用React和Redux实现同构应用 152
5.4 React 16在服务端渲染上的惊喜 157
5.5 同构项目实战：基于Node.js的“渐进式”流渲染 158
5.6 使用Next.js实现同构应用 168
5.7 使用Next.js实现同构应用 172
5.8 本章小结 173
第6章深入理解React技术内幕与生态社区 184
6.1 React组件的组合和复用——高阶组件 184
6.2 高阶组件和render prop 193
6.3 React组件的组合和复用——Function as Child Component 198
6.4 React组件的组合和复用——Children API 203
6.5 React“轮子”是怎样设计的 209
6.6 setState异步带来的讨论和思考 216
6.7 React组件和React element到底是什么 221
6.8 实现一个简易的React库 227
6.9 引入Redux的必要性及利弊 239
6.10 如何设计并应用Redux connect 243
6.11 使用selector实现最佳实践 248
6.12 Redux store数据结构扁平化及在Twitter中的实践 255
6.13 React state和Redux state的选取原则 266
6.14 本章小结 267
第7章单页面应用代码分割 269
7.1 React和代码分割 269
7.2 Redux reducer层面代码分割 278
7.3 代码分割工程实例 283
7.4 本章小结 288
第8章 React应用性能优化 289
8.1 React应用性能的秘密 289
8.2 提升React应用性能的建议 295
8.3 使用PureComponent保证开发性能 302
8.4 Redux中间件和Web Worker 308
8.5 本章小结 311

精彩节摘[url=]编辑[/url][url=] 播报[/url]

推荐序1
在前端开发这样一个重视界面开发的领域中，组件化几乎是“真理”。但是不同场景下的组件化，以及不同人眼中的组件化，可能很不一样。
我见过许多不同的组件形态，有ExtJS 这种高度封装的富组件、jQuery UI 这种与页面DOM 强相关的组件、Bootstrap 这种重样式轻行为的组件，以及各种不知名的公司团队自研的组件等。
但是从来没有一个组件框架能够像React 一样受到那么多的关注，被那么多的开发者谈论，它在很大程度上改变了前端开发方式。
毫无疑问，React 是成功的。为什么这么说呢？也许是因为它的组件模型足够简单、易于理解；也许是因为它允许开发者把视图写在JSX 中；也许是因为它为很多前端工程师带来了如JSX、V-DOM、Flux、immutable、HOC、Fiber 等新的理念（虽然有些理念不是它创造的）；也许是因为它对同构的支持；也许是因为React Native；也许，因为以上全部。
但无论如何，这些理由都不重要。我看到的是，在我的周围，无论是否使用React，大家都在谈论和学习它，在进行框架选型的时候，它都是无法回避的选项之一。
我们平时在开发项目时，框架选型仅仅是一个开始，真正考验工程师能力的是如何在选定框架的理念及用法下，驾驭越来越高的业务复杂度。React 的上手难度并不小。我们需要对其理念和设计思想有足够深入的了解，结合自身的业务判断哪些是真正有用的，从而不陷入过度设计中。我们需要对其实现原理有足够深入的了解，避免陷入性能的瓶颈。
在这本《React 状态管理与同构实战》中，作者对设计思想、框架实现、应用实践都进行了较多的剖析，相信读者一定能够通过学习，快速将本书中的知识应用到项目开发中。
而我更希望看到的是，读者阅读过后能够在应用层面进行更深入的思考。比如，什么东西是应该作为应用状态被管理的，在什么样的场景下应该使用怎样的组件间通信模式，在相同的应用场景下如果不用Redux 而使用MobX，应该怎么实现……将这些思考融会贯通，而不再依赖一本书，这才是真的收获。
董睿
百度资深前端工程师、EFE 核心成员、San 框架主要开发者
2018 年6 月于北京

推荐序2
1995 年，Brendan Eich 花了10 天时间开发出一门脚本语言，取名为Mocha，并将其集成到了Netscape 浏览器中，不久后这门语言被改名为LiveScript，意思是可以让网页充满动力。同年年底，网景公司和SUN 公司达成协议并获得了Java 商标的使用权，于是正式将这门语言更名为JavaScript。
历史选择了JavaScript，使其成为目前浏览器唯一内置支持的语言。时至今日，JavaScript已经不仅仅局限于为网页开发实现特效，而是真正发展成了一门全功能的编程语言。
我从2005 年开始接触网页开发，经历了Web 开发的“上古时代”。在Web 1.0 时期，我们开发出来的网页是给人“看”的，此时流行jQuery 这种用来处理浏览器兼容性的库，以及像Dojo、YUI、ExtJS 这种用来做UI 的库。
随着计算机和浏览器性能的提升，JavaScript 的功能开始不再局限于实现简单的网页开发，特别是Ajax 的使用更是显著提升了用户体验，这个时期被称为Web 2.0。站在开发者和使用者的角度，在Web 2.0 时期开发出来的网页是给人“用”的。此时的JavaScript 程序无论是从代码数量还是代码复杂程度上，都是前所未有的。于是开发者们开始借鉴后端流行的MVC 框架的思想，随后又根据前端自身的特点改进了传统MVC 模式，并发展出了MVP、MVVM 等新架构，其中比较有代表性的有Knockout.js、Backbone.js、Ember.js 等。
后来，React 发布了，自那时起我成为一名坚定的React 使用者。React 不仅仅是一个全新的框架，更是一种新的思想。React 重新定义了前端View 层的开发模式：v = f(s)，其中s代表引用的状态（state），v 代表View，而f 则是一个把状态映射为View 的纯函数。这个简单的公式代表了前端开发的一种模式：View 就是对状态的展示，对于同一个f 而言，相同的状态永远对应相同的视图。
React 就是这里的f，React 生态的不同库则代表着不同的f，比如react-native、react-art、react-canvas、react-svg 等。
当我们写<TextBox color="red">时，它既可以被react-dom 渲染为一个div 标签，也可以在服务器端被渲染为一个字符串，还可以被react-native 渲染为原生的控件，甚至可以被渲染为Word 中的一行文本、Excel 中的一个表格等。而这一切的魔法就源自React 的思想。
但是React 只是一个专注于View 层的框架，它只负责把状态映射为视图，并不关注状态的来源和转换，因此在实际开发中，我们还需要关注“React 全家桶”中的Redux。另外，同构应用可以让开发者只编写一套代码便可以既运行在服务端，又运行在客户端，充分结合两者的优势，并有效避免两者的不足。这也是React 的一大优势。
虽然市面上关于React 的书已经数不胜数，但是大多都是围绕着React 框架本身的使用方法来讲解的，对于深入讲解React 状态管理与同构应用的书却寥寥无几，而侯策和颜海镜的这本书正好可以弥补这一方面的不足。
几年前，由于机缘巧合，我认识了本书的作者之一颜海镜。颜海镜不仅是开源的狂热爱好者，也是国内最早学习并实践React 的开发者之一。从我认识他起，他就一直在关注各种前端新技术，并开源了很多前端开发工具和库，这一点真的非常难能可贵！
如果你想实战React 同构应用，或者想要深入全面地了解有关React 状态管理的知识，相信这本《React 状态管理与同构实战》一定会给你很多启发。强烈建议各位读者细细品读。
迷渡（justjavac）
Flarum 中文社区创始人
2018 年6 月于天津

作者简介[url=]编辑[/url][url=] 播报[/url]
侯策。硕士毕业于法国国立高等电信学校。曾任职于BePATIENT集团，负责互联网+医疗平台的研发。曾任职于法国能源和苏伊士集团，参与欧洲天然气运输和费用系统的研发。2015年回国加入百度知识搜索部，负责多个产品线的大型技术迭代。行业之外是一名国家二级运动员（足球项目），曾组织过赴北非撒哈拉地区看望孤儿等慈善活动。
颜海镜。知名技术博主，开源达人，常以歪脖无脸男形象作为头像活跃于各大技术网站，经过多年沉淀，专注Web前端开发，先后任职于金山、百度、美团点评，负责前端开发工作。

媒体评论[url=]编辑[/url][url=] 播报[/url]
世界的数字化进程正在加速，我们也进入了体验至上的新移动时代。在连接人和信息世界的所有技术中，前端开发作为直接影响用户体验的关键一环，正在迅速发展和变革，前端工程师也成为产品研发团队里非常关键的拼图之一，决定了产品迭代的成败。本书以React为中心，在讲解相关技术栈的同时，深刻剖析了隐藏在其后的编程思想，希望更多的开发者能够以这本书为起点，深入把握前端开发技术，活学活用，打造较好的用户体验，为新移动时代创造更多优秀的产品。
百度公司副总裁，沈抖
本书针对React进行了专题研究，其中还包含Redux用法的详细介绍、源码解读、中间件的实现原理，以及前后端同构的解决方案（即服务器渲染）等内容，非常适合初学者进阶学习React的相关知识，掌握实战技能。建议各位读者按照源码上机练习，以达到更好的学习效果。
资深JavaScript语言专家、知名技术博客作者，阮一峰
很高兴能够看到这本书，它系统讲解了Redux和同构技术，是一本在垂直领域中非常优秀的专业书籍，从入门到组件通信，再到源码，都给出了非常详细的解读。本书简明扼要，重视实践，尤其适合初学者。学会Redux可以让你在前端开发中更加游刃有余，同构开发对于拓宽前端开发领域也有着极其重要的意义，建议大家深入学习。
Node.js布道者、Cnode社区管理员，狼叔（i5ting）
React以及Redux是目前非常流行的技术栈，本书深入React技术，涉及React的方方面面内容，从入门到高阶实例，从状态管理到同构应用技巧，无论是在技术实现原理上，还是在实战经验上，都能帮助读者对React形成全貌理解。无论你是React新手还是资深工程师，相信都能从本书中获得启发。
新浪移动前端技术专家，付强（小爝）
本书由浅入深，从React涉及的基本概念开始不断延伸，不仅分场景覆盖了以React、Redux、Next.js等为核心的组件化开发流程及工程优化策略，还深入源码解读了技术细节，并通过对设计思路的阐述来帮助读者增强系统性的理解和认知。相信本书可以帮助广大开发者更好地掌握React体系的精髓，创造出体验更佳的产品。
百度资深前端工程师、知乎知名博主，顾轶灵

前言[url=]编辑[/url][url=] 播报[/url]

序1
一本书的诞生，可以说既是偶然，也是冥冥之中的必然。
当电子工业出版社的孙奇俏编辑第一次联系我向我约稿的时候，恰逢2017年谷雨时节，雨生百谷，万物蓬勃，破土向生。于我个人而言，那段时间正是我回国加入百度，需要迅速积累技术经验的阶段，于是我便无知无畏地开始了近一年的写作旅程。
当我在寻找选题时，毫不犹豫地将目光聚焦到了前端开发方向。我相信每位开发者都能清醒地意识到：这个领域既收获着发展，也迎接着淘汰；它既有着与生俱来的混乱，也有着与这种混乱抗衡的秩序；它既批量产生需求与迭代，也制造了同等规模的迷茫与困惑。没错，短短几年时间，前端开发者就脱离了“刀耕火种”的原始时期。
伴随着JavaScript语言的不断演进，Node.js强势崛起，HTML 5等技术攻城略地，巨大的信息量和学习成本如潮水般涌来。然而，发展的“副作用”是让开发者感受到前所未有的陌生：一切都在加速向前，自己却只能目瞪口呆。但我想，每个人都不甘心做一个原地踏步的旁观者。
这本书的诞生，和试图挣脱这种无力感有关。因此我选取了这场前端“工业革命”中最具代表性的潮头宠儿——React。以React技术栈为主题，将自己学习过程中所见所感的点滴片段用一根主线串起来，不断拓宽思考的边界，吸纳社区智慧进行深度剖析。我想从最初的那些困惑出发，用解读源码、分析设计模式、结合实战案例的方式，探究框架或技术栈“全家桶”的设计思路以及存在意义；探究何为昙花一现的技术趋势，何为永恒持久的思想价值；探究怎样增加对技术的掌控，以避免在快速发展的风暴中随波逐流……
React绝不仅仅是一个灵活、高效的视图层开发库。截至本书写作之时，v16.4.1版本共有20个分支，其代码仓库中有近1万次commits，94次发布的背后是1193名贡献者的付出，还有102694个stars和18568个forks，这些数字构建起了一个庞大的技术社区，其背后蕴含了海量的优秀设计思想。
在这本书的整个写作过程中，我也再一次感受到了以React为中心的状态管理及同构应用的魔力——我体会到了组件化和传统视图层开发的巨大区别，体会到了数据驱动和面条式操作DOM的不同，体会到了虚拟DOM和性能优化的奥秘，体会到了状态管理背后的精妙设计，体会到了Redux是发布订阅模式和函数式的结晶，体会到了同构应用和服务端渲染的背后是架构设计的螺旋式变迁，是对用户体验和性能的不断打磨和孜孜追求。总之，我体会到了为什么React技术栈能够脱颖而出，因此也真心希望这本书能够对各位读者有所启迪。
回想起来，本书大部分内容是在北京完成的：起笔于仲夏，经历过“帝都”雾霾弥漫的冬季，完成于如今农历五月初五的端午佳节。那么索性就以屈原《离骚》中的诗句来结尾吧，与读者共勉。
愿我们对技术永远秉承“亦余心之所善兮，虽九死其犹未悔”的追求，以及“路漫漫其修远兮，吾将上下而求索”的态度。
侯策
2018年6月于北京

序2
人生需要勇气
人类的每一次进步，技术的每一次发展，都源自对未知世界的探索，探索让我们发现了更大的世界。有人说探索需要好奇心，有人说探索需要想象力，而我觉得，探索最需要的是勇气，面对未知，只有勇敢的人才能迈出第一步。
在前端的世界里从来不缺乏有勇气的人，这些勇士们引领着前端技术的不断变革，技术更新了一代又一代，从以jQuery为代表的操作DOM时代，到以Backbone为代表的MVC框架时代，到以AngularJS为代表的MVVM框架时代，再到以React为代表的前端技术的新一代，前端领域发展空前繁荣，颇有百家争鸣、百花齐放的局面，而这一切都源自各位开发者的勇气。
如果你对上面提到的名词不了解，或者对当前火热的技术感觉迷茫，没关系，不要担心。其实人的天性就是依赖熟悉的环境，我也曾害怕恐惧，也曾对新技术畏首畏尾，但幸运的是，我突破了自己——曾经陌生的名词，如今都被我驾驭得很好，是勇气给了我力量！
关于我和React的故事，要感谢本书的另一位作者——侯策。他是我最志同道合的同事和朋友，他也是一位非常优秀的勇士。他最先研究React，并给我介绍了很多与React相关的知识，我们共同探讨，最开始我们仅仅是基于React做一些比较小的内部系统，现在React已经变成主要的技术栈了，极大提高了我的工作效率。关于我对React的理解，你可以通过阅读本书的内容来了解，因为我已经把我的想法总结好，融入书里了。
关于我和这本书的故事，还是要感谢侯策。你之所以能看到这本书，是因为他是一位勇气值爆棚的真正勇士。最开始侯策和我说要写一本书的时候，我是拒绝的，虽然我写了很多博客文章，也阅读了很多书籍，但我从来没有写过书，面对未知我有点犹豫，但是最后我还是决定要试一试，因为这次帮我战胜未知的，除了勇气还有友谊。感谢勇气和友谊，让我又一次挑战了自己。
写书和写博客还是有很大差别的，整个写作过程是一个挑战和突破的过程，因此书中难免有纰漏，也欢迎大家批评斧正。如果说，面对未知时是勇气让我们迈出了第一步，那么接下来靠的就是坚持了。做任何事情，都是重在开始，贵在坚持。

更多资源请咨询课小二

客服QQ

大厂学院重磅上线-大厂学院SVIP十门合集

金职位_Java架构师-技术专家

[完结]大前端2022版

Java工程师高薪训练营【完结】

体系课-大数据工程师2022

Go高级工程师实战营

金职位_Java架构师十项全能

msb002-【马士兵VIP课程】Java高级互联网架

金职位_移动端架构师移动架构师

hot016-大厂学院10套合集

jk005-Go进阶训练营-极客时间（11周）

《React状态管理与同构实战》_侯策等

温馨提示：

相关帖子

金职位_Web前端架构师【完结】

金职位_Java架构师-技术专家

[完结]大前端2022版

金职位_Go开发工程师[完结]

mksz469-Go+Python双语言混合开发【完结】

Go高级工程师实战营

金职位_Java架构师十项全能

msb002-【马士兵VIP课程】Java高级互联网架

金职位_移动端架构师移动架构师

关于我们

帮助中心

新手指南

客服QQ

87887023

反馈建议

更多资源请咨询课小二

客服QQ

金职位_Java架构师-技术专家

[完结]大前端2022版

Java工程师高薪训练营【完结】

体系课-大数据工程师2022

Go高级工程师实战营

金职位_Java架构师十项全能

msb002-【马士兵VIP课程】Java高级互联网架

金职位_移动端架构师 移动架构师

hot016-大厂学院10套合集

jk005-Go进阶训练营-极客时间（11周）

《React状态管理与同构实战》_侯策等

温馨提示：

相关帖子

关于我们

帮助中心

新手指南

客服QQ

87887023

反馈建议

金职位_移动端架构师移动架构师