深入React技术栈 内容简介

深入React技术栈 内容简介

深入React技术栈 目录

深入React技术栈 精彩文摘

本书从几个维度去介绍 React。一是作为 View 库,它怎么实现组件化,以及它背后的实现原理。二是扩展到 Flux 应用架构及重要的衍生品 Redux,它们怎么与 React 结合做应用开发。三是对 React 与 server 的碰撞产生的一些思考。四是讲述它在可视化方面的优势与劣势。本书适合有一定经验的前端开发人员阅读。第1章 初入 React 世界 11.1 React 简介 11.1.1 专注视图层 11.1.2 Virtual DOM 11.1.3 函数式编程 21.2 JSX 语法 31.2.1 JSX 的由来 31.2.2 JSX 基本语法 71.3 React 组件 111.3.1 组件的演变 111.3.2 React 组件的构建 181.4 React 数据流 211.4.1 state 211.4.2 props 231.5 React 生命周期 291.5.1 挂载或卸载过程 291.5.2 数据更新过程 301.5.3 整体流程 331.6 React 与 DOM 341.6.1 ReactDOM 351.6.2 ReactDOM 的不稳定方法 361.6.3 refs 381.6.4 React 之外的 DOM 操作 401.7 组件化实例:Tabs 组件 411.8 小结 47第2章 漫淡 React 482.1 事件系统 482.1.1 合成事件的绑定方式 482.1.2 合成事件的实现机制 492.1.3 在React中使用原生事件 512.1.4 合成事件与原生事件混用 512.1.5 对比React合成事件与JavaScript原生事件 542.2 表单 552.2.1 应用表单组件 552.2.2 受控组件 602.2.3 非受控组件 612.2.4 对比受控组件和非受控组件 622.2.5 表单组件的几个重要属性 632.3 样式处理 642.3.1 基本样式设置 642.3.2 CSS Modules 662.4 组件间通信 742.4.1 父组件向子组件通信 742.4.2 子组件向父组件通信 752.4.3 跨级组件通信 772.4.4 没有嵌套关系的组件通信 792.5 组件间抽象 812.5.1 mixin 812.5.2 高阶组件 862.5.3 组合式组件开发实践 932.6 组件性能优化 972.6.1 纯函数 972.6.2 PureRender 1002.6.3 Immutable 1032.6.4 key 1092.6.5 react-addons-perf 1102.7 动画 1112.7.1 CSS 动画与 JavaScript 动画 1112.7.2 玩转 React Transition 1132.7.3 缓动函数 1162.8 自动化测试 1212.8.1 Jest 1212.8.2 Enzyme 1242.8.3 自动化测试 1252.9 组件化实例:优化 Tabs 组件 1252.10 小结 133第3章 解读 React 源码 1343.1 初探 React 源码 1343.2 Virtual DOM 模型 1373.2.1 创建 React 元素 1383.2.2 初始化组件入口 1403.2.3 文本组件 1413.2.4 DOM 标签组件 1443.2.5 自定义组件 1503.3 生命周期的管理艺术 1513.3.1 初探 React 生命周期 1523.3.2 详解 React 生命周期 1523.3.3 无状态组件 1633.4 解密setState机制 1643.4.1 setState异步更新 1643.4.2 setState 循环调用风险 1653.4.3 setState调用栈 1663.4.4 初识事务 1683.4.5 解密setState 1703.5 diff 算法 1723.5.1 传统 diff 算法 1723.5.2 详解 diff 1723.6 React Patch 方法 1813.7 小结 183第4章 认识 Flux 架构模式 1844.1 React 独立架构 1844.2 MV* 与 Flux 1904.2.1 MVC/MVVM 1904.2.2 Flux 的解决方案 1934.3 Flux 基本概念 1944.4 Flux 应用实例 1984.4.1 初始化目录结构 1984.4.2 设计 store 1984.4.3 设计 actionCreator 2004.4.4 构建 controller-view 2024.4.5 重构 view 2034.4.6 添加单元测试 2054.5 解读 Flux 2064.5.1 Flux 核心思想 2064.5.2 Flux 的不足 2074.6 小结 207第5章 深入 Redux 应用架构 2085.1 Redux 简介 2085.1.1 Redux 是什么 2085.1.2 Redux 三大原则 2095.1.3 Redux 核心 API 2105.1.4 与 React 绑定 2115.1.5 增强 Flux 的功能 2125.2 Redux middleware 2125.2.1 middleware 的由来 2125.2.2 理解 middleware 机制 2135.3 Redux 异步流 2175.3.1 使用 middleware 简化异步请求 2175.3.2 使用 middleware 处理复杂异步流 2215.4 Redux 与路由 2245.4.1 React Router 2255.4.2 React Router Redux 2275.5 Redux 与组件 2295.5.1 容器型组件 2295.5.2 展示型组件 2295.5.3 Redux 中的组件 2305.6 Redux 应用实例 2315.6.1 初始化 Redux 项目 2315.6.2 划分目录结构 2325.6.3 设计路由 2345.6.4 让应用跑起来 2355.6.5 优化构建脚本 2395.6.6 添加布局文件 2395.6.7 准备首页的数据 2425.6.8 连接 Redux 2455.6.9 引入 Redux Devtools 2505.6.10 利用 middleware 实现 Ajax请求发送 2515.6.11 请求本地的数据 2525.6.12 页面之间的跳转 2535.6.13 优化与改进 2565.6.14 添加单元测试 2575.7 小结 258第6章 Redux 高阶运用 2596.1 高阶 reducer 2596.1.1 reducer 的复用 2596.1.2 reducer 的增强 2616.2 Redux 与表单 2626.2.1 使用 redux-form-utils 减少创建表单的冗余代码 2636.2.2 使用 redux-form 完成表单的异步验证 2656.2.3 使用高阶 reducer 为现有模块引入表单功能 2676.3 Redux CRUD 实战 2686.3.1 准备工作 2686.3.2 使用 Table 组件完成“查”功能 2696.3.3 使用 Modal 组件完成“增”与“改” 2746.3.4 巧用 Modal 实现数据的删除确认 2776.3.5 善用 promise 玩转 Redux 异步事件流 2786.4 Redux 性能优化 2796.4.1 Reselect 2806.4.2 Immutable Redux 2826.4.3 Reducer 性能优化 2826.5 解读 Redux 2846.5.1 参数归一化 2856.5.2 初始状态及 getState 2866.5.3 subscribe 2866.5.4 dispatch 2876.5.5 replaceReducer 2886.6 解读 react-redux 2886.6.1 Provider 2886.6.2  connect 2906.6.3 代码热替换 2936.7 小结 294第7章 React 服务端渲染 2957.1 React 与服务端模板 2957.1.1 什么是服务端渲染 2957.1.2 react-view 2967.1.3 react-view 源码解读 2967.2 React 服务端渲染 2997.2.1 玩转 Node.js 3007.2.2 React-Router 和 Koa-Router统一 3037.2.3 同构数据处理的探讨 3067.3 小结 307第8章 玩转 React 可视化 3088.1 React 结合 Canvas 和 SVG 3088.1.1 Canvas 与 SVG 3088.1.2 在 React 中的 Canvas 3108.1.3 React 中的 SVG 3118.2 React 与可视化组件 3168.2.1 包装已有的可视化库 3168.2.2 使用 D3 绘制 UI 部分 3178.2.3 使用 React 绘制 UI 部分 3198.3 Recharts 组件化的原理 3228.3.1 声明式的标签 3238.3.2 贴近原生的配置项 3258.3.3 接口式的 API 3268.4 小结 328附录A 开发环境 329附录B 编码规范 345附录C Koa middleware 349欢迎进入React世界。从本章开始,不论你是刚刚入门的前端开发者,还是经验老道的资深工程师,都可以学习到React的基本思想以及基本用法。在之后慢慢深入的过程中,各节均会不同程度地带上进阶的实践与分析。希望在本章结束时,我们能够带领你实现应用React进行基本的组件开发。请从这里开始你的旅程……React是Facebook在2013年开源在GitHub上的JavaScript库。React把用户界面抽象成一个个组件,如按钮组件Button、对话框组件Dialog、日期组件Calendar。开发者通过组合这些组件,最终得到功能丰富、可交互的页面。通过引入JSX语法,复用组件变得非常容易,同时也能保证组件结构清晰。有了组件这层抽象,React把代码和真实渲染目标隔离开来,除了可以在浏览器端渲染到DOM来开发网页外,还能用于开发原生移动应用。现在的应用已经变得前所未有的复杂,因而开发工具也必须变得越来越强大。和Angular、Ember等框架不同,React并不是完整的MVC/MVVM框架,它专注于提供清晰、简洁的View(视图)层解决方案。而又与模板引擎不同,React不仅专注于解决View层的问题,又是一个包括View和Controller的库。对于复杂的应用,可以根据应用场景自行选择业务层框架,并根据需要搭配Flux、Redux、GraphQL/Relay来使用。React不像其他框架那样提供了许多复杂的概念与烦琐的API,它以Minimal API Interface为目标,只提供组件化相关的非常少量的API。同时为了保持灵活性,它没有自创一套规则,而是尽可能地让用户使用原生JavaScript进行开发。只要熟悉原生JavaScript并了解重要概念后,就可以很容易上手React应用开发。真实页面对应一个DOM树。在传统页面的开发模式中,每次需要更新页面时,都要手动操作DOM来进行更新,如图1-1所示。DOM操作非常昂贵。我们都知道在前端开发中,性能消耗最大的就是DOM操作,而且这部分代码会让整体项目的代码变得难以维护。React把真实DOM树转换成JavaScript对象树,也就是Virtual DOM,如图1-2所示。每次数据更新后,重新计算Virtual DOM,并和上一次生成的Virtual DOM做对比,对发生变化的部分做批量更新。React也提供了直观的shouldComponentUpdate生命周期回调,来减少数据变化后不必要的Virtual DOM对比过程,以保证性能。我们说Virtual DOM提升了React的性能,但这并不是React的唯一亮点。此外,Virtual DOM的渲染方式也比传统DOM操作好一些,但并不明显,因为对比DOM节点也是需要计算资源的。它最大的好处其实还在于方便和其他平台集成,比如react-native是基于Virtual DOM渲染出原生控件,因为React组件可以映射为对应的原生控件。在输出的时候,是输出Web DOM,还是Android控件,还是iOS控件,就由平台本身决定了。因此,react-native有一个口号——Learn Once,Write Anywhere。在过去,工业界的编程方式一直以命令式编程为主。命令式编程解决的是做什么的问题,比如图灵机,而现代计算机就是一个经历了多次进化的高级图灵机。如果说人脑最擅长的是分析问题,那么电脑最擅长的就是执行指令,电脑只需要几条汇编指令就可以轻松算出我们需要很长时间才能解出的运算。

类似文章

发表评论

您的电子邮箱地址不会被公开。