深入 React 技术栈

🌙
手机阅读
本文目录结构

深入 React 技术栈

编辑推荐

全面深入讲述 React 技术栈的第 1 本原创图书,Strikingly 联合创始人及 CTO 郭达峰作序推荐,pure render 专栏主创倾力打造

覆盖 React、Flux、Redux 及可视化,帮助开发者在实践中深入理解技术和源码

前端组件化主流解决方案,一本书玩转 React“全家桶”

内容简介

本书从几个维度去介绍 React。一是作为 View 库,它怎么实现组件化,以及它背后的实现原理。二是扩展到 Flux 应用架构及重要的衍生品 Redux,它们怎么与 React 结合做应用开发。三是对 React 与 server 的碰撞产生的一些思考。四是讲述它在可视化方面的优势与劣势。

本书适合有一定经验的前端开发人员阅读。

作者简介

陈屹,前端架构师,就职于阿里巴巴。热衷开源事业,长年专注于前端架构、数据可视化、Node.js 等领域,知乎专栏 pure render 的创办人。

目录

第 1 章 初入 React 世界 1

  • 1.1 React 简介 1
  • 1.1.1 专注视图层 1
  • 1.1.2 Virtual DOM 1
  • 1.1.3 函数式编程 2
  • 1.2 JSX 语法 3
  • 1.2.1 JSX 的由来 3
  • 1.2.2 JSX 基本语法 7
  • 1.3 React 组件 11
  • 1.3.1 组件的演变 11
  • 1.3.2 React 组件的构建 18
  • 1.4 React 数据流 21
  • 1.4.1 state 21
  • 1.4.2 props 23
  • 1.5 React 生命周期 29
  • 1.5.1 挂载或卸载过程 29
  • 1.5.2 数据更新过程 30
  • 1.5.3 整体流程 33
  • 1.6 React 与 DOM 34
  • 1.6.1 ReactDOM 35
  • 1.6.2 ReactDOM 的不稳定方法 36
  • 1.6.3 refs 38
  • 1.6.4 React 之外的 DOM 操作 40
  • 1.7 组件化实例:Tabs 组件 41
  • 1.8 小结 47

第 2 章 漫淡 React 48

  • 2.1 事件系统 48
  • 2.1.1 合成事件的绑定方式 48
  • 2.1.2 合成事件的实现机制 49
  • 2.1.3 在 React 中使用原生事件 51
  • 2.1.4 合成事件与原生事件混用 51
  • 2.1.5 对比 React 合成事件与 JavaScript 原生事件 54
  • 2.2 表单 55
  • 2.2.1 应用表单组件 55
  • 2.2.2 受控组件 60
  • 2.2.3 非受控组件 61
  • 2.2.4 对比受控组件和非受控组件 62
  • 2.2.5 表单组件的几个重要属性 63
  • 2.3 样式处理 64
  • 2.3.1 基本样式设置 64
  • 2.3.2 CSS Modules 66
  • 2.4 组件间通信 74
  • 2.4.1 父组件向子组件通信 74
  • 2.4.2 子组件向父组件通信 75
  • 2.4.3 跨级组件通信 77
  • 2.4.4 没有嵌套关系的组件通信 79
  • 2.5 组件间抽象 81
  • 2.5.1 mixin 81
  • 2.5.2 高阶组件 86
  • 2.5.3 组合式组件开发实践 93
  • 2.6 组件性能优化 97
  • 2.6.1 纯函数 97
  • 2.6.2 PureRender 100
  • 2.6.3 Immutable 103
  • 2.6.4 key 109
  • 2.6.5 react-addons-perf 110
  • 2.7 动画 111
  • 2.7.1 CSS 动画与 JavaScript 动画 111
  • 2.7.2 玩转 React Transition 113
  • 2.7.3 缓动函数 116
  • 2.8 自动化测试 121
  • 2.8.1 Jest 121
  • 2.8.2 Enzyme 124
  • 2.8.3 自动化测试 125
  • 2.9 组件化实例:优化 Tabs 组件 125
  • 2.10 小结 133

第 3 章 解读 React 源码 134

  • 3.1 初探 React 源码 134
  • 3.2 Virtual DOM 模型 137
  • 3.2.1 创建 React 元素 138
  • 3.2.2 初始化组件入口 140
  • 3.2.3 文本组件 141
  • 3.2.4 DOM 标签组件 144
  • 3.2.5 自定义组件 150
  • 3.3 生命周期的管理艺术 151
  • 3.3.1 初探 React 生命周期 152
  • 3.3.2 详解 React 生命周期 152
  • 3.3.3 无状态组件 163
  • 3.4 解密 setState 机制 164
  • 3.4.1 setState 异步更新 164
  • 3.4.2 setState 循环调用风险 165
  • 3.4.3 setState 调用栈 166
  • 3.4.4 初识事务 168
  • 3.4.5 解密 setState 170
  • 3.5 diff 算法 172
  • 3.5.1 传统 diff 算法 172
  • 3.5.2 详解 diff 172
  • 3.6 React Patch 方法 181
  • 3.7 小结 183

第 4 章 认识 Flux 架构模式 184

  • 4.1 React 独立架构 184
  • 4.2 MV* 与 Flux 190
  • 4.2.1 MVC/MVVM 190
  • 4.2.2 Flux 的解决方案 193
  • 4.3 Flux 基本概念 194
  • 4.4 Flux 应用实例 198
  • 4.4.1 初始化目录结构 198
  • 4.4.2 设计 store 198
  • 4.4.3 设计 actionCreator 200
  • 4.4.4 构建 controller-view 202
  • 4.4.5 重构 view 203
  • 4.4.6 添加单元测试 205
  • 4.5 解读 Flux 206
  • 4.5.1 Flux 核心思想 206
  • 4.5.2 Flux 的不足 207
  • 4.6 小结 207

第 5 章 深入 Redux 应用架构 208

  • 5.1 Redux 简介 208
  • 5.1.1 Redux 是什么 208
  • 5.1.2 Redux 三大原则 209
  • 5.1.3 Redux 核心 API 210
  • 5.1.4 与 React 绑定 211
  • 5.1.5 增强 Flux 的功能 212
  • 5.2 Redux middleware 212
  • 5.2.1 middleware 的由来 212
  • 5.2.2 理解 middleware 机制 213
  • 5.3 Redux 异步流 217
  • 5.3.1 使用 middleware 简化异步
  • 请求 217
  • 5.3.2 使用 middleware 处理复杂
  • 异步流 221
  • 5.4 Redux 与路由 224
  • 5.4.1 React Router 225
  • 5.4.2 React Router Redux 227
  • 5.5 Redux 与组件 229
  • 5.5.1 容器型组件 229
  • 5.5.2 展示型组件 229
  • 5.5.3 Redux 中的组件 230
  • 5.6 Redux 应用实例 231
  • 5.6.1 初始化 Redux 项目 231
  • 5.6.2 划分目录结构 232
  • 5.6.3 设计路由 234
  • 5.6.4 让应用跑起来 235
  • 5.6.5 优化构建脚本 239
  • 5.6.6 添加布局文件 239
  • 5.6.7 准备首页的数据 242
  • 5.6.8 连接 Redux 245
  • 5.6.9 引入 Redux Devtools 250
  • 5.6.10 利用 middleware 实现 Ajax
  • 请求发送 251
  • 5.6.11 请求本地的数据 252
  • 5.6.12 页面之间的跳转 253
  • 5.6.13 优化与改进 256
  • 5.6.14 添加单元测试 257
  • 5.7 小结 258

第 6 章 Redux 高阶运用 259

  • 6.1 高阶 reducer 259
  • 6.1.1 reducer 的复用 259
  • 6.1.2 reducer 的增强 261
  • 6.2 Redux 与表单 262
  • 6.2.1 使用 redux-form-utils 减少
  • 创建表单的冗余代码 263
  • 6.2.2 使用 redux-form 完成表单的
  • 异步验证 265
  • 6.2.3 使用高阶 reducer 为现有模块
  • 引入表单功能 267
  • 6.3 Redux CRUD 实战 268
  • 6.3.1 准备工作 268
  • 6.3.2 使用 Table 组件完成“查”
  • 功能 269
  • 6.3.3 使用 Modal 组件完成“增”
  • 与“改” 274
  • 6.3.4 巧用 Modal 实现数据的删除
  • 确认 277
  • 6.3.5 善用 promise 玩转 Redux 异步事件流 278
  • 6.4 Redux 性能优化 279
  • 6.4.1 Reselect 280
  • 6.4.2 Immutable Redux 282
  • 6.4.3 Reducer 性能优化 282
  • 6.5 解读 Redux 284
  • 6.5.1 参数归一化 285
  • 6.5.2 初始状态及 getState 286
  • 6.5.3 subscribe 286
  • 6.5.4 dispatch 287

  • 6.5.5 replaceReducer 288

  • 6.6 解读 react-redux 288

  • 6.6.1 Provider 288

  • 6.6.2  connect 290

  • 6.6.3 代码热替换 293

  • 6.7 小结 294

第 7 章 React 服务端渲染 295

  • 7.1 React 与服务端模板 295
  • 7.1.1 什么是服务端渲染 295
  • 7.1.2 react-view 296
  • 7.1.3 react-view 源码解读 296
  • 7.2 React 服务端渲染 299
  • 7.2.1 玩转 Node.js 300
  • 7.2.2 React-Router 和 Koa-Router
  • 统一 303
  • 7.2.3 同构数据处理的探讨 306
  • 7.3 小结 307

第 8 章 玩转 React 可视化 308

  • 8.1 React 结合 Canvas 和 SVG 308
  • 8.1.1 Canvas 与 SVG 308
  • 8.1.2 在 React 中的 Canvas 310
  • 8.1.3 React 中的 SVG 311
  • 8.2 React 与可视化组件 316
  • 8.2.1 包装已有的可视化库 316
  • 8.2.2 使用 D3 绘制 UI 部分 317
  • 8.2.3 使用 React 绘制 UI 部分 319
  • 8.3 Recharts 组件化的原理 322
  • 8.3.1 声明式的标签 323
  • 8.3.2 贴近原生的配置项 325
  • 8.3.3 接口式的 API 326
  • 8.4 小结 328
  • 附录 A 开发环境 329
  • 附录 B 编码规范 345
  • 附录 C Koa middleware 349

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐