React状态管理与同构实战-图书

推荐2
收藏6
浏览2.8K

React状态管理与同构实战

侯策颜海镜 (作者)　

书　　号：978-7-121-34554-8
出版日期：2018-08-06
页　　数：
开　　本：
出版状态：上市销售
维护人：孙奇俏

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

知名技术博主亲自执笔 | 众多专家大咖联合力荐 | 深入解读前沿同构技术，带你驶向全栈工程师的彼岸

侯策。硕士毕业于法国国立高等电信学校。曾任职于BePATIENT集团，负责互联网+医疗平台的研发。曾任职于法国能源和苏伊士集团，参与欧洲天然气运输和费用系统的研发。2015年回国加入百度知识搜索部，负责多个产品线的大型技术迭代。行业之外是一名国家二级运动员（足球项目），曾组织过赴北非撒哈拉地区看望孤儿等慈善活动。

颜海镜。知名技术博主，开源达人，常以歪脖无脸男形象作为头像活跃于各大技术网站，经过多年沉淀，专注Web前端开发，先后任职于金山、百度、美团点评，负责前端开发工作。

前言
本书内容
本书以React技术栈为核心，在介绍React用法的基础上，从源码层面分析了Redux思想，同时着重介绍了服务端渲染和同构应用的架构模式。全书共分8章，其中每一章的主要内容如下。
第1章 React与前端
本章简单介绍了前端开发的历史发展，以及React的诞生故事，并对本书后面章节要介绍的知识进行了简单概述。
第2章深入浅出React
本章围绕组件介绍了很多React相关知识，包括组件的实现方式、组件的抽象、JSX语法、组件的生命周期、组件的属性和状态、如何进行事件交互、组件间如何通信、如何组织组件、组件与DOM的关系等。
第3章 Redux应用架构基础
本章介绍了Redux基础及用法，包括reducer函数的编写、派发action的设计，以及store状态的更新流程等。在此基础上，还介绍了一个极为重要的概念——函数式编程。本章在数据的不可变性操作上进行了较为深入的实践。同时因为应用开发需求复杂，对于异步处理场景，本章也介绍了Redux中间件的使用方法。
第4章深入理解Redux
本章深入剖析了Redux源码及本质，细致讲解了Redux原理，介绍了其实现思想、中间件的设计思想、react-redux库的奥秘，以及在实际开发中的一些最佳实践，帮助读者对Redux有一个更高层面的认知。
第5章揭秘React同构应用
本章介绍了基于React开发同构应用的技术实现。前后端的合作和分工、模式的变迁和不同模式的优缺点，将会是一个永恒的话题。React为同构应用打开了一扇窗户。在React同构设计以及Node.js迅速发展的背景下，前端开发完全可以拥有更广阔的空间。
第6章深入理解React技术内幕与生态社区
本章对React及Redux中的热点话题进行了探索，介绍了React设计理念和魔法、React组件的组合和复用、React“轮子”开发、简单的React库编写、Redux数据结构优化和角色分析等内容。结合社区中的优秀思想，希望在读者受到启发的同时，也打开一扇React进阶的大门。
第7章单页面应用代码分割
本章深入讨论了React技术中的代码分割问题。代码分割不仅仅关系到性能优化，它更是一种技术工程设计的体现，直接影响用户体验。本章围绕这个主题进行了梳理与总结，并通过一个单页面应用实例进行了演示。
第8章 React应用性能优化
性能涉及方方面面，如前端工程化、浏览器解析和渲染、比较算法等。本章主要介绍了React框架在性能上的优劣、虚拟的DOM思想，以及在开发React应用时需要注意的性能优化环节和手段。同时，优化手段也在与时俱进，不断更新，需要开发者时刻保持学习。

第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

全部展开

本书勘误

页码：P20 • 行数：倒数第三行 • 印次： 1

珈蓝白塔提交于 2018/9/4 16:37:36

孙奇俏确认于 2019/2/20 16:11:03
页码：P3 • 行数：倒数第三行 • 印次： 1

珈蓝白塔提交于 2018/9/4 16:34:09

孙奇俏确认于 2019/2/20 16:11:14
页码：5 • 行数：16 • 印次： 1

多了一个 extends

snowflake 提交于 2018/11/9 12:09:39

孙奇俏确认于 2019/2/20 16:12:39
页码：37 • 行数：-2 • 印次： 2018

这里应该是 super.componentWillUnmount() 吧？

Hopsken 提交于 2018/8/23 11:16:21

孙奇俏确认于 2019/2/20 16:10:33
页码：50 • 行数：6 • 印次： 1

这里addItemOneByOne这里没有返回值啊，array4不应该是undefined吗？array3不是每个项加一吗，不是[2,2]吗？很疑惑~

Yyyhhh 提交于 2018/9/29 11:37:26

孙奇俏确认于 2019/2/20 16:13:07

读者评论

请问第37页function SetTimeoutHOC (InnerComponent) 的InnerComponent内容是什么?

tytom2003发表于 2022/3/5 16:49:43
第53页,
原文: 那么我们可以定义这样一个 action creator 函数:
const learnReduxActionFactory = book => { type: '', book }
这个函数返回一个对象

返回的对象应该加上括号 book => ({})

fefeng发表于 2019/5/26 15:57:46

第 11 页
2.1.4 PureComponent
shouldComponentUpdate 中的代码错误，当 state 和 nextState 或 props 和 nextProps 相等的时候，应该返回false, 不应该返回 true.
可以改成:

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    const {props, state} = this
    function shallowCompare(a, b) {
      return a === b || Object.keys(a).every(k => a[k] === b[k])
    }
    const isStateEquals = shallowCompare(nextState, state)
    const isPropsEquals = shallowCompare(nextProps, props)
    if (isStateEquals && isPropsEquals) {
      return false
    }
    return true
  }

nbhaohao发表于 2018/12/31 11:46:48

静默岁月发表于 2018/11/20 0:08:31
- 红色框里应该是{}而不是[]吧，t的数据类型是对象
  
  静默岁月发表于 2018/11/20 0:09:13
这里不应该是App么

Soyas发表于 2018/9/13 2:40:29
- 感谢指出，会在下一版修正
  
  lucasHC发表于 2018/9/28 14:14:49