React进阶之路.徐超(带书签文字版).pdf

《React进阶之路》详细介绍了React技术栈涉及的主要技术。本书分为基础篇、进阶篇和实战篇三部分。基础篇主要介绍React的基本用法，包括React16的新特性；进阶篇深入讲解组件state、虚拟DOM、高阶组件等React中的重要概念，同时对初学者容易困惑的知识点做了介绍；实战篇介绍ReactRouter、Redux和MobX3个React技术栈的重要成员，并通过实战项目讲解这些技术如何和React结合使用。《React进阶之路》示例丰富、注重实战，适用于从零开始学习React的初学者，或者已经有一些React使用经验，但希望更加全面、深入理解React技术栈的开发人员。阅读本书，需要先掌握基础的前端开发知识。 第1篇 基础篇——React，一种革命 性的UI开发理念 第1章 初识React 3 1.1 React简介 3 1.2 ES 6语法简介 4 1.3 开发环境及工具介绍 9 1.3.1 基础环境 9 1.3.2 辅助工具 9 1.3.3 Create React App 10 1.4 本章小结 12 第2章 React基础 13 2.1 JSX 13 2.1.1 JSX简介 13 2.1.2 JSX语法 14 2.1.3 JSX不是必需的 16 2.2 组件 17 2.2.1 组件定义 17 2.2.2 组件的props 18 2.2.3 组件的state 21 2.2.4 有状态组件和无状态组件 23 2.2.5 属性校验和默认属性 26 2.2.6 组件样式 28 2.2.7 组件和元素 32 2.3 组件的生命周期 34 2.3.1 挂载阶段 34 2.3.2 更新阶段 35 2.3.3 卸载阶段 36 2.4 列表和Keys 36 2.5 事件处理 39 2.6 表单 43 2.6.1 受控组件 44 2.6.2 非受控组件 51 2.7 本章小结 52 第3章 React 16新特性 53 3.1 render新的返回类型 53 3.2 错误处理 54 3.3 Portals 56 3.4 自定义DOM属性 57 3.5 本章小结 58 第2篇 进阶篇——用好React，你必须要知道的那些事 第4章 深入理解组件 60 4.1 组件state 60 4.1.1 设计合适的state 60 4.1.2 正确修改state 63 4.1.3 state与不可变对象 64 4.2 组件与服务器通信 66 4.2.1 组件挂载阶段通信 66 4.2.2 组件更新阶段通信 67 4.3 组件通信 68 4.3.1 父子组件通信 68 4.3.2 兄弟组件通信 71 4.3.3 Context 75 4.3.4 延伸 78 4.4 特殊的ref 79 4.4.1 在DOM元素上使用ref 79 4.4.2 在组件上使用ref 79 4.4.3 父组件访问子组件的DOM节点 81 4.5 本章小结 82 第5章 虚拟DOM和性能优化 83 5.1 虚拟DOM 83 5.2 Diff算法 84 5.3 性能优化 87 5.4 性能检测工具 90 5.5 本章小结 91 第6章 高阶组件 92 6.1 基本概念 92 6.2 使用场景 93 6.3 参数传递 96 6.4 继承方式实现高阶组件 99 6.5 注意事项 99 6.6 本章小结 101 第3篇 实战篇——在大型Web应用中使用React 第7章 路由：用React Router开发单页面应用 103 7.1 基本用法 103 7.1.1 单页面应用和前端路由 103 7.1.2 React Router 的安装 104 7.1.3 路由器 104 7.1.4 路由配置 105 7.1.5 链接 107 7.2 项目实战 108 7.2.1 后台服务API介绍 108 7.2.2 路由设计 111 7.2.3 登录页 113 7.2.4 帖子列表页 117 7.2.5 帖子详情页 125 7.3 代码分片 133 7.4 本章小结 138 第8章 Redux：可预测的状态管理机 139 8.1 简介 139 8.1.1 基本概念 139 8.1.2 三大原则 141 8.2 主要组成 141 8.2.1 action 141 8.2.2 reducer 142 8.2.3 store 146 8.3 在React中使用Redux 148 8.3.1 安装react-redux 148 8.3.2 展示组件和容器组件 148 8.3.3 connect 149 8.3.4 mapStateToProps 150 8.3.5 mapDispatchToProps 150 8.3.6 Provider 组件 151 8.4 中间件与异步操作 152 8.4.1 中间件 152 8.4.2 异步操作 154 8.5 本章小结 155 第9章 Redux项目实战 156 9.1 组织项目结构 156 9.2 设计state 161 9.2.1 错误1：以API作为设计state的依据 161 9.2.2 错误2：以页面UI为设计state的依据 164 9.2.3 合理设计state 165 9.3 设计模块 170 9.3.1 app模块 170 9.3.2 auth模块 171 9.3.3 posts模块 173 9.3.4 comments模块 177 9.3.5 users模块 179 9.3.6 ui模块 180 9.6.7 index模块 181 9.4 连接Redux 182 9.4.1 注入state 182 9.4.2 注入action creators 184 9.4.3 connect连接PostList和Redux 185 9.5 Redux调试工具 187 9.6 性能优化 188 9.6.1 React Router引起的组件重复渲染问题 188 9.6.2 Immutable.JS 193 9.6.3 Reselect 198 9.7 本章小结 199 第10章 MobX：简单可扩展的状态管理解决方案 200 10.1 简介 200 10.2 主要组成 204 10.2.1 state 204 10.2.2 computed value 211 10.2.3 reaction 212 10.2.4 action 215 10.3 MobX响应的常见误区 216 10.4 在React中使用MobX 220 10.5 本章小结 221 第11章 MobX项目实战 222 11.1 组织项目结构 222 11.2 设计store 223 11.3 视图层重构 234 11.4 MobX调试工具 236 11.5 优化建议 238 11.6 Redux与MobX比较 241 11.7 本章小结 242 性的UI开发理念 第1章 初识React 3 1.1 React简介 3 1.2 ES 6语法简介 4 1.3 开发环境及工具介绍 9 1.3.1 基础环境 9 1.3.2 辅助工具 9 1.3.3 Create React App 10 1.4 本章小结 12 第2章 React基础 13 2.1 JSX 13 2.1.1 JSX简介 13 2.1.2 JSX语法 14 2.1.3 JSX不是必需的 16 2.2 组件 17 2.2.1 组件定义 17 2.2.2 组件的props 18 2.2.3 组件的state 21 2.2.4 有状态组件和无状态组件 23 2.2.5 属性校验和默认属性 26 2.2.6 组件样式 28 2.2.7 组件和元素 32 2.3 组件的生命周期 34 2.3.1 挂载阶段 34 2.3.2 更新阶段 35 2.3.3 卸载阶段 36 2.4 列表和Keys 36 2.5 事件处理 39 2.6 表单 43 2.6.1 受控组件 44 2.6.2 非受控组件 51 2.7 本章小结 52 第3章 React 16新特性 53 3.1 render新的返回类型 53 3.2 错误处理 54 3.3 Portals 56 3.4 自定义DOM属性 57 3.5 本章小结 58 第2篇 进阶篇——用好React，你必须要知道的那些事 第4章 深入理解组件 60 4.1 组件state 60 4.1.1 设计合适的state 60 4.1.2 正确修改state 63 4.1.3 state与不可变对象 64 4.2 组件与服务器通信 66 4.2.1 组件挂载阶段通信 66 4.2.2 组件更新阶段通信 67 4.3 组件通信 68 4.3.1 父子组件通信 68 4.3.2 兄弟组件通信 71 4.3.3 Context 75 4.3.4 延伸 78 4.4 特殊的ref 79 4.4.1 在DOM元素上使用ref 79 4.4.2 在组件上使用ref 79 4.4.3 父组件访问子组件的DOM节点 81 4.5 本章小结 82 第5章 虚拟DOM和性能优化 83 5.1 虚拟DOM 83 5.2 Diff算法 84 5.3 性能优化 87 5.4 性能检测工具 90 5.5 本章小结 91 第6章 高阶组件 92 6.1 基本概念 92 6.2 使用场景 93 6.3 参数传递 96 6.4 继承方式实现高阶组件 99 6.5 注意事项 99 6.6 本章小结 101 第3篇 实战篇——在大型Web应用中使用React 第7章 路由：用React Router开发单页面应用 103 7.1 基本用法 103 7.1.1 单页面应用和前端路由 103 7.1.2 React Router 的安装 104 7.1.3 路由器 104 7.1.4 路由配置 105 7.1.5 链接 107 7.2 项目实战 108 7.2.1 后台服务API介绍 108 7.2.2 路由设计 111 7.2.3 登录页 113 7.2.4 帖子列表页 117 7.2.5 帖子详情页 125 7.3 代码分片 133 7.4 本章小结 138 第8章 Redux：可预测的状态管理机 139 8.1 简介 139 8.1.1 基本概念 139 8.1.2 三大原则 141 8.2 主要组成 141 8.2.1 action 141 8.2.2 reducer 142 8.2.3 store 146 8.3 在React中使用Redux 148 8.3.1 安装react-redux 148 8.3.2 展示组件和容器组件 148 8.3.3 connect 149 8.3.4 mapStateToProps 150 8.3.5 mapDispatchToProps 150 8.3.6 Provider 组件 151 8.4 中间件与异步操作 152 8.4.1 中间件 152 8.4.2 异步操作 154 8.5 本章小结 155 第9章 Redux项目实战 156 9.1 组织项目结构 156 9.2 设计state 161 9.2.1 错误1：以API作为设计state的依据 161 9.2.2 错误2：以页面UI为设计state的依据 164 9.2.3 合理设计state 165 9.3 设计模块 170 9.3.1 app模块 170 9.3.2 auth模块 171 9.3.3 posts模块 173 9.3.4 comments模块 177 9.3.5 users模块 179 9.3.6 ui模块 180 9.6.7 index模块 181 9.4 连接Redux 182 9.4.1 注入state 182 9.4.2 注入action creators 184 9.4.3 connect连接PostList和Redux 185 9.5 Redux调试工具 187 9.6 性能优化 188 9.6.1 React Router引起的组件重复渲染问题 188 9.6.2 Immutable.JS 193 9.6.3 Reselect 198 9.7 本章小结 199 第10章 MobX：简单可扩展的状态管理解决方案 200 10.1 简介 200 10.2 主要组成 204 10.2.1 state 204 10.2.2 computed value 211 10.2.3 reaction 212 10.2.4 action 215 10.3 MobX响应的常见误区 216 10.4 在React中使用MobX 220 10.5 本章小结 221 第11章 MobX项目实战 222 11.1 组织项目结构 222 11.2 设计store 223 11.3 视图层重构 234 11.4 MobX调试工具 236 11.5 优化建议 238 11.6 Redux与MobX比较 241 11.7 本章小结 242