阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      深入 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
      目录
      目录