React前端技术与工程实践.pdf

CMYCMMYCYCMYKReact前端技术与工程实践-扉页.pdf 1 2017/3/21 14:45:16 内容简介 本书是一本专门介绍 React 前端框架基本原理及其相关工程实践的技术参考书。全书分为 14 章，主要包括 React 技术基本原理、相关前端开发工具链、实用技巧及热门资源介绍四部分。全书结构完整、层次清晰，由浅入深地介绍了 React 前端技术的原理、相关工具链的使用及 React 技术在工程中的应用技巧等。本书关注技术原理，在讲解技术应用的同时介绍相关原理和理念，帮助读者更深入地理解和掌握 React 技术，并能尽快地投入实际应用。本书也尽可能全面地囊括当前 JavaScript 前端工程开发的相关技术与工具，通过本书可以全面地掌握 React 相关的知识体系并较快地进入实际工程开发。本书语言浅显易懂，辅以生动的实例，是 React 前端工程开发的好助手和好工具。本书适用于对前端开发有一定了解和开发经验的读者，也可作为相关培训教材使用。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。版权所有，侵权必究。图书在版编目（CIP）数据 React 前端技术与工程实践/李晋华编著.北京：电子工业出版社，2017.4 ISBN 978-7-121-31050-8.R.李.移动终端应用程序程序设计.TN929.53 中国版本图书馆 CIP 数据核字（2017）第 044537 号 策划编辑：孙学瑛 责任编辑：徐津平 特约编辑：赵树刚 印 刷：三河市双峰印刷装订有限公司 装 订：三河市双峰印刷装订有限公司 出版发行：电子工业出版社 北京市海淀区万寿路 173 信箱 邮编：100036 开 本：787980 1/16 印张：17.5 字数：308 千字 版 次：2017 年 4 月第 1 版 印 次：2017 年 4 月第 1 次印刷 定 价：69.00 元 凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888，88258888。质量投诉请发邮件至 ，盗版侵权举报请发邮件至 。本书咨询联系方式：010-51260888-819，。前 言 随着 AJAX 技术、Chrome JavaScript V8 引擎的出现，以及移动端的兴起，前端发生了天翻地覆的变化。传统的 JavaScript 知识体系即将过时。前端正以全新的思路和革新的理念得到越来越多的重视和关注，涌现出了众多技术，如 Node.js、NPM、CommonJS、AMD、ES 6、Webpack、Babel、React、AngularJS 等。众多新技术的冲击让人无所适从，而且，往往一个技术会附带一系列相关的技术和工具，更是让人难以下手。React 技术的更新发展也很快，相关的资料在网上虽然能查到，但往往只是针对一个特定技术点，语焉不详；或者使用了最新语法，读者难以理解；又或者文档与软件版本不匹配，导致在模块安装时出现莫名提示、运行错误等问题。有感于此，编者编著了本书，针对这些痛点，力图以 React 技术为抓手，整体介绍与当前前端相关的主流技术体系与使用途径，为读者找到一条技术的主干脉络，方便读者全面快速地深入学习以 React 为代表的前沿前端技术。为使读者降低学习成本，并很快地投入到工程实践中，本书还介绍了前端开发环境搭建和相关工具链的使用，力图为读者呈现前端开发的全貌。另外，本书在逐层深入介绍 React技术的同时，还少量地讲解了底层技术原理，方便读者深入理解。本书内容 本书分四部分，第一部分讲解 React 的基本原理和架构。考虑到相关辅助工具对知识的干扰，此部分排除外围技术干扰，以最朴素、最原始的方式来看 React 的React 前端技术与工程实践 IV 本质和原理，同时针对实际应用场景介绍了典型组件的开发思路及代码。第二部分讲解 React 相关工具链的原理和使用方法，切入面向工程化开发的前端开发技术体系，介绍相关工具的使用方法，并重点介绍与 React 相关的使用流程。第三部分讲解 React 的高级功能，如测试、路由等，是应对复杂界面的完整解决方案不可或缺的重要组成部分。第四部分介绍当前 React 的热门技术和相关资源。源代码 本书的主要实例均附有源代码，源代码以实例包的形式发布在网上，读者可以自行下载。实例包中提供了 Node.js 的安装程序和运行说明文件。书中所提到的实例名对应网上同名文件夹。实例包根目录下的“使用说明.txt”文件说明了要运行的前提条件和实施步骤。本书特点 新。本书中的 JavaScript 使用 ES 6 语法，React 针对 v15.0.0 以上版本，JSX使用 Babel 6.x 版本等，确保读者掌握最前沿的知识和技能。透。本书不是简单地介绍知识，而是透过知识来看本质的理念和原理，只有这样才能把技术吃透、用活。全。本书力图将 React 相关的技术体系集中在一起，包括 React 相关工具使用、React 实用技巧、React 高级框架等，使读者全面掌握 React，减少时间成本，提高知识获取效率。实。本书的讲解和实例尽量向实际使用场景靠拢，所涉及的复杂组件实例（树形组件、分页组件、表格组件等）均可直接用于实际开发环境，且配有详细的解说，读者可以快速上手。适用范围（1）适用于从事前端技术开发且有一定 JavaScript 基础的初学者。（2）适用于从事网站前端设计与制作的开发者。（3）可作为相关培训机构的专题培训教材。前 言 V（4）可作为相关开发者的工具书。本书约定（1）在面向对象的语言中，成员函数也称为方法，本书统一称为“成员函数”或简称为“函数”。（2）代码都具有阴影背景，以示区别。（3）代码中要重点强调、提醒的部分使用粗体格式。关于我们 参与本书编写的人员还包括韩岗、刘兰峥、胡松奇、刘彦君。尽管我们已经做了仔细校对，但书中疏漏和不足之处在所难免，如果在书中发现任何的文字和代码错误，非常欢迎读者朋友反馈给我们。如果您有好的建议、意见，或遇到与本书内容相关的疑难问题，都可以联系我们，我们会及时为您解答。服务邮箱：ljhiiii 。轻松注册成为博文视点社区用户（），您即可享受以下服务。下载资源：下载资源：本书所提供的示例代码及资源文件均可在【下载资源】处下载。提交勘误：提交勘误：您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。与我们交流：与我们交流：在页面下方【读者评论】处留下您的疑问或观点，与我们和其他读者一同学习交流。页面入口：http:/ 二维码：目 录 第一篇 原汁原味的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 目 录 VII 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 React 前端技术与工程实践 VIII 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 目 录 IX 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 React 前端技术与工程实践 X 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 模块和包.