React前端技术与工程实践

编辑推荐

　　React技术日新月异，现有资料烦琐杂乱，或语焉不详、或难以理解，或文档与软件不相匹……没关系，本书带你探寻React的本质和原理，针对实际应用场景给出典型组件的开发思路及代码、React相关工具链的原理和使用方法，以及相关使用流程React的高级功能。力求为读者呈现完整详尽的React前端技术开发，降低学习成本，获取吸收技术精华。

特别说明：购买此电子书，无赠品，敬请谅解。

内容简介

　　《React前端技术与工程实践》是一本专门介绍React前端框架基本原理及其相关工程实践的技术参考书。《React前端技术与工程实践》分为14章，主要包括React技术基本原理、相关前端开发工具链、实用技巧及热门资源介绍四部分。《React前端技术与工程实践》结构完整、层次清晰，由浅入深地介绍了React前端技术的原理、相关工具链的使用及React技术在工程中的应用技巧等。《React前端技术与工程实践》关注技术原理，在讲解技术应用的同时介绍相关原理和理念，帮助读者更深入地理解和掌握React技术，并能尽快地投入实际应用。《React前端技术与工程实践》也尽可能全面地囊括当前JavaScript前端工程开发的相关技术与工具，通过《React前端技术与工程实践》可以全面地掌握React相关的知识体系并较快地进入实际工程开发。《React前端技术与工程实践》语言浅显易懂，辅以生动的实例，是React前端工程开发的好助手和好工具。
　　《React前端技术与工程实践》适用于对前端开发有一定了解和开发经验的读者，也可作为相关培训教材使用。

作者简介

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

前言

　　前言
　　随着AJAX技术、Chrome JavaScript V8引擎的出现，以及移动端的兴起，前端发生了天翻地覆的变化。传统的JavaScript知识体系即将过时。前端正以全新的思路和革新的理念得到越来越多的重视和关注，涌现出了众多技术，如Node.js、NPM、CommonJS、AMD、ES 6、Webpack、Babel、React、AngularJS等。众多新技术的冲击让人无所适从，而且，往往一个技术会附带一系列相关的技术和工具，更是让人难以下手。
　　React技术的更新发展也很快，相关的资料在网上虽然能查到，但往往只是针对一个特定技术点，语焉不详；或者使用了最新语法，读者难以理解；又或者文档与软件版本不匹配，导致在模块安装时出现莫名提示、运行错误等问题。
　　有感于此，编者编著了本书，针对这些痛点，力图以React技术为抓手，整体介绍与当前前端相关的主流技术体系与使用途径，为读者找到一条技术的主干脉络，方便读者全面快速地深入学习以React为代表的前沿前端技术。为使读者降低学习成本，并很快地投入到工程实践中，本书还介绍了前端开发环境搭建和相关工具链的使用，力图为读者呈现前端开发的全貌。另外，本书在逐层深入介绍React技术的同时，还少量地讲解了底层技术原理，方便读者深入理解。
　　本书内容
　　本书分四部分，第一部分讲解React的基本原理和架构。考虑到相关辅助工具对知识的干扰，此部分排除外围技术干扰，以最朴素、最原始的方式来看React的本质和原理，同时针对实际应用场景介绍了典型组件的开发思路及代码。第二部分讲解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）可作为相关培训机构的专题培训教材。
　　（4）可作为相关开发者的工具书。
　　本书约定
　　（1）在面向对象的语言中，成员函数也称为方法，本书统一称为“成员函数”或简称为“函数”。
　　（2）代码都具有阴影背景，以示区别。
　　（3）代码中要重点强调、提醒的部分使用粗体格式。
　　关于我们
　　参与本书编写的人员还包括韩岗、刘兰峥、胡松奇、刘彦君。尽管我们已经做了仔细校对，但书中疏漏和不足之处在所难免，如果在书中发现任何的文字和代码错误，非常欢迎读者朋友反馈给我们。如果您有好的建议、意见，或遇到与本书内容相关的疑难问题，都可以联系我们，我们会及时为您解答。服务邮箱：ljhiiii@sina.com。
　　轻松注册成为博文视点社区用户（www.broadview.com.cn），您即可享受以下服务。
　　● 下载资源：本书所提供的示例代码及资源文件均可在【下载资源】处下载。
　　● 提交勘误：您对书中内容的修改意见可在【提交勘误】处提交，若被采纳，将获赠博文视点社区积分（在您购买电子书时，积分可用来抵扣相应金额）。
　　● 与我们交流：在页面下方【读者评论】处留下您的疑问或观点，与我们和其他读者一同学习交流。
　　页面入口：//www.broadview.com.cn/31050二维码：

精彩书摘

　　我们常看到的React介绍已经被JSX、AMD、ES 2015等繁华的技术所遮掩，其实React的核心是简单和简洁的。本篇力图揭开蒙在React表面的面纱，用最朴素的方式、最原生的API展现React的基本脉络，便于读者从本质特征上理解React的基本思想和方法，而这也往往是我们在实际开发中减少出错、排查问题的利器。
　　我们正处于一个Web前端技术变革的时代。早期嵌入在浏览器中的JavaScript只是小众语言，性能也不好。但从AJAX技术出现以后，基于JavaScript的前端技术得到了前所未有的重视。而后jQuery、Prototype、Dojo、ExtJS等前端组件框架陆续出现，到Google公司专门为JavaScript研发的V 8引擎更使得JavaScript插上了腾飞的翅膀，前端生长日趋繁荣。
　　近年来移动应用的蓬勃发展，移动端的生长势头变得更加强盛。移动应用的出现给前端带来了许多新的挑战，如多终端适配问题、多分辨率适配问题、远程调试问题等，针对这些问题出现了各种解决方案，推动了Web技术的发展，Web前端出现了百花齐放的态势，Web开发出现了新的变革。语言层面，出现了CoffeeScript、TypeScript等语言，对原来的JavaScript进行了语法增强，JavaScript语言本身也出现了新的标准，如ES 2015（也称ES 6）等。Twitter公司推出的Bootstrap试图从样式层面入手解决终端适配问题，出现了LESS、SASS和Stylus等预处理语言；在JavaScript模块管理方面，出现了AMD、CMD、KMD等多个模块管理规范，也衍生了SeaJS、RequireJS等模块化管理工具。包管理工具，经历了components、bower、spm后，npm开始占据主导地位。在规范和标准上也有不少产出，Web Components的出现给前端开发开辟了新思路；在JS调试方面，各浏览器提供了种类繁多、功能丰富的调试工具和方案；在自动化测试方面，PhantomJS在自动化测试上逐渐取代了Selenium，而WebDriver规范的出现进一步推动了自动化测试的进程；在构建工具上先后出现了grunt、browserify、gulp、webpack、jspm等，目前webpack逐渐成为了主流。
　　在前端框架方面，目前也出现了众多框架，其中的佼佼者 React和AngularJS均出自名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。
　　本书着眼于React技术，同时也对与React相关的JS工程化技术进行探讨。其目的是让读者从繁花缀眼的技术丛林中，找到一条平坦的探索之路并可直接用于实战。读者能从本书中获得最大的价值。
　　React起源于Facebook的内部项目，该公司积极尝试引入HTML 5技术用来架设Instagram网站，过程中发现，对于复杂前端HTML 5性能下降明显，达不到预期效果。在经过对市场上所有JavaScript MVC框架调研后，都找不到能满足自己需求的产品，于是决定自己开发一套。2013年5月开发完成后就发布到开源平台上，一发布就引起了广泛的关注和认可。
　　React的设计思想极其独特，是对前端技术的一大革命性创新，其性能优秀、代码逻辑简单、适用面广且能用于移动APP开发，受到越来越多的人的关注和使用，普通认为它代表了未来Web开发的主流方向。同时，React关键性的虚拟DOM思想也陆续被其他框架引入，如AngularJS2，这也进一步证明React理念的优秀和先进性。比如GitHub最新的源码编辑器Atom就是用React构建的；雅虎邮箱也正在使用React重构，等等。
　　ReactJS官网地址：https：//facebook.github.io/react/。
　　GitHub地址：https：//github.com/facebook/react。
　　在Web开发中，UI界面总是需要根据数据生成对应的DOM由浏览器呈现出来，并随数据的变化而调整相应的DOM，这就需要反复对DOM进行操作。复杂或频繁的 DOM 操作通常会对性能造成很大的影响。为此React 引入了虚拟 DOM（Virtual DOM）机制：用户构建虚拟DOM，由React将虚拟DOM渲染到浏览器DOM中。每次数据变化React都会扫描整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。虚拟DOM是内存数据，本身操作性能极高，对实际DOM进行操作的仅仅是差异变化，从而性能得到了很大的提高。
　　在保证性能的同时，用户不再需要关注某些数据的变化如何局部更新到一个或多个具体DOM元素，而只需要关心数据状态，以及对应数据状态下界面是如何渲染的，除此之外的其他工作都由React自动高效地完成。这样既明晰了开发思路，又提高了开发效率。
　　由于我们的主要操作对象是虚拟DOM，与真实浏览器无关，甚至是否是浏览器环境都没关系，只要存在从虚拟DOM到真实DOM的转换器，就可以实现虚拟DOM的最终界面呈现，从而达到跨平台的目的。而从虚拟DOM到真实DOM的转换工具由react-dom实现，从虚拟DOM到移动APP的转换工具由react-native实现。

---