React前端技术与工程实践

本书是一本专门介绍React前端框架基本原理及其相关工程实践的技术参考书。全书共分为13章，主要讲解React技术基本原理、相关前端开发工具链、React不错技术以及React热门资源介绍四个部分的内容。全书结构完整、层次清晰，以浅显易懂的语言描述了React前端技术的原理、相关工具链的使用、React技术在工程中的实际应用方案等。本书着重于本质理解，在讲解技术应用的同时也介绍相关的原理和理念帮助读者更深入地理解和掌握React技术并能尽快地投入实际应用，同时本书也尽可能全地囊括当前JavaScript前端工程开发的相关技术与工具，通过本书可以全面地掌握React相关知识并直接用于工程开发实践。本书作者长期从事信息技术和信息系统的研发工作，并拥有多年的教学经验。本书内容全面，编排合理，论述清晰，是一本介绍React技术的理想教材。本书适用于那些对前端开发有一定了解和开发经验的读者。可作为工具书使用。

李晋华，信息系统架构师和技术顾问。多年从事军事物流信息系统研发工作和相关教学工作。在后勤信息化领域承担多项重点项目的研发工作。曾获军队科技进步奖二等奖。在系统架构设计、系统集成和前端交互设计等方面具有丰富的实战经验。

篇 原汁原味的React 1 React简介 3 1.1 前端技术发展及趋势 3 1.2 React简介 4 1.3 React特点 5 1.3.1 虚拟DOM 5 1.3.2 组件化 6 1.3.3 单向数据流 7 1.4 React与React Native 7 1.5 对React的几个认识误区 8 2 React基础 9 2.1 React最小环境搭建 9 2.2 Helloworld示例 11 2.3 React基本架构 13 2.3.1 虚拟DOM结构 13 2.3.2 虚拟DOM元素 14 2.3.3 组件工厂 15 2.3.4 React的内部更新机制 16 2.3.5 虚拟DOM的特殊属性 19 2.4 JSX语法 20 2.4.1 JSX等价描述 22 2.4.2 JSX转译工具Babel 23 2.4.3 JSX中的表达式 24 2.4.4 JSX中的注释 26 2.4.5 JSX展开属性 26 2.5 React注意事项 28 2.5.1 ReactDOM.render的目标节点 28 2.5.2 组件名约定 28 2.5.3 class属性和for属性替换 28 2.5.4 行内样式 29 2.5.5 自定义HTML属性 30 2.5.6 HTML转义 30 3 React组件 33 3.1 组件主要成员 34 3.1.1 state成员 34 3.1.2 props成员 36 3.1.3 render成员函数 37 3.2 组件的生命周期 37 3.2.1 实例化阶段 38 3.2.2 活动阶段 39 3.2.3 销毁阶段 41 3.3 组件事件响应 41 3.3.1 事件代理 42 3.3.2 事件自动绑定 42 3.3.3 合成事件 42 3.4 props属性验证 45 3.5 组件的其他成员 47 3.6 关于state的几个设计原则 49 3.6.1 哪些组件应该有state 49 3.6.2 哪些数据应该放入state中 49 3.6.3 哪些数据不应该放入state中 50 4 React顶级API 51 4.1 React命名空间 51 4.2 ReactDOM命名空间 53 4.3 ReactDOMServer命名空间 55 4.4 children工具函数 56 5 React表单 59 5.1 表单元素 59 5.2 事件响应 60 5.2.1 bind复用 61 5.2.2 name复用 62 5.3 可控组件与不可控组件 64 5.3.1 可控组件 65 5.3.2 不可控组件 66 6 React复合组件 69 6.1 组件嵌套 69 6.2 组件参数传递 71 6.2.1 动态参数传递 71 6.2.2 使用Underscore来传递 72 6.2.3 使用Context 来传递 73 6.3 组件间的通信 76 6.3.1 事件回调机制 76 6.3.2 公开组件功能 77 6.3.3 mixins 79 6.3.4 动态子级 81 6.4 高阶组件 82 6.4.1 高阶组件概念 82 6.4.2 高阶组件应用：属性转换器 83 6.4.3 高阶组件应用：逻辑分离与封装 84 7 React常用组件示例 88 7.1 按钮组件 88 7.2 分页组件 90 7.3 带分页的表格组件 94 7.4 树形组件 103 7.5 模态对话框组件 109 7.6 综合实例 117 7.6.1 综合实例一 117 7.6.2 综合实例二 117 8 React插件 121 9 React实用技巧 123 9.1 绑定React未提供的事件 123 9.2 通过AJAX加载初始数据 124 9.3 使用ref属性 126 9.3.1 ref字符串属性 126 9.3.2 ref回调函数属性 128 9.4 使用classNames.js 130 9.4.1 classNames介绍 130 9.4.2 classNames用法 131 9.4.3 在ES 6中使用动态的classNames 131 9.4.4 多类名去重 132 9.5 使用Immutable.js 132 9.5.1 Immutable.js介绍 132 9.5.2 Immutable基本用法 133 9.5.3 Immutable对象比较 134 9.5.4 Immutable List用法 135 9.5.5 Immutable Map用法 136 9.6 与jQuery集成 138 9.6.1 React与jQuery的区别 138 9.6.2 在React中使用jQuery 139 9.6.3 在jQuery中使用React 141 第二篇 React开发相关工具链 10 JS前端开发工具链 145 10.1 Node.js 145 10.1.1 Node.js安装 146 10.1.2 Node.js使用 148 10.2 Node.js模块和包 150 10.2.1 模块 150 10.2.2 包 151 10.3 npm模块管理器 153 10.3.1 npm安装 153 10.3.2 npm初始化 154 10.3.3 npm安装模块 155 10.3.4 使用cnpm 157 10.3.5 npm常用命令 158 10.3.6 自定义脚本 161 10.4 ES 6规范简介 163 10.4.1 ES 6语法简介 163 10.4.2 ES 6模块管理 168 10.4.3 基于ES 6语法的React组件写法 170 10.5 ESLint工具 172 10.5.1 ESLint介绍 172 10.5.2 安装和使用 173 10.5.3 配置 174 10.5.4 React检查 175 10.6 Babel工具 176 10.6.1 配置.babelrc文件 177 10.6.2 命令行转译工具：babel-cli 178 10.6.3 命令行运行工具：babel-node 179 10.6.4 实时转译模块：babel-register 180 10.6.5 浏览器实时转译模块：browser.js 180 10.6.6 转译API模块：babel-core 181 10.6.7 扩展转译模块：babel-polyfill 181 10.6.8 ESLint前置转译模块：babel-eslint 181 10.6.9 Mocha前置转译模块：babel-core/register 182 10.7 webpack打包工具使用与技巧 183 10.7.1 前端模块化与webpack介绍 183 10.7.2 webpack的打包React实例 185 10.7.3 webpack模块加载器 189 10.7.4 webpack开发服务器 190 10.7.5 React热加载器 190 10.7.6 打包成多个资源文件 192 10.8 基于完整工具链的项目目录结构 194 第三篇 React进阶 11 Flux ＆ Redux 199 11.1 Flux 199 11.1.1 Flux简介 200 11.1.2 基本架构 201 11.1.3 动作和动作发生器 202 11.1.4 分发器 203 11.1.5 存储 203 11.1.6 视图与控制视图 204 11.2 Redux 205 11.2.1 Redux基本架构 205 11.2.2 Action 207 11.2.3 Reducer 208 11.2.4 Store 210 11.2.5 bindActionCreators 212 11.3 React-Redux 213 11.3.1 React-Redux的使用方法 213 11.3.2 Connect 215 11.4 Redux工程目录结构 218 12 路由 221 12.1 前端路由 221 12.2 路由的基本原理 222 12.3 安装与引用 222 12.4 路由配置 223 12.4.1 路由器和路由 223 12.4.2 嵌套路由 224 12.4.3 默认路由 225 12.4.4 path 属性 226 12.4.5 NotFoundRoute组件 227 12.4.6 Redirect组件 228 12.4.7 IndexRedirect 组件 229 12.4.8 history属性 229 12.4.9 路由回调 230 12.5 路由切换 231 12.5.1 Link组件 232 12.5.2 IndexLink 232 12.5.3 动态路由切换 233 13 React单元测试 235 13.1 测试脚本示例 236 13.2 React测试代码示例 237 13.3 React测试相关工具 238 13.3.1 Mocha 238 13.3.2 chai 239 13.3.3 jsdom 241 13.3.4 react-addons-test-utils 242 13.4 创建测试环境 245 13.5 React组件测试 246 13.5.1 浅渲染 246 13.5.2 全DOM渲染 248 13.5.3 使用findDOMNode方法查找DOM 249 第四篇 React相关资源 14 React相关资源介绍 253 14.1 React Starter Kit 253 14.2 React bootstrap 257 14.3 Material-UI 259 14.4 Ant Design 261 14.5 React-d 3与echarts-for-react 263 14.6 React Storybook 265 14.7 awesome-react 266