React工程师修炼指南
上QQ阅读APP看书,第一时间看更新

前言

随着信息时代的到来,数字化经济革命的浪潮正在大刀阔斧地改变着人类的工作方式和生活方式。在数字化经济时代,从抓数字化管理人才、知识管理人才和复合型管理人才教育入手,加快培养知识经济人才队伍,为企业发展和提高企业核心竞争能力提供强有力的人才保障。目前,数字化经济在全球经济增长中扮演着越来越重要的角色,以互联网、云计算、大数据、物联网、人工智能为代表的数字技术近几年发展迅猛,数字技术与传统产业的深度融合释放出巨大能量,成为引领经济发展的强劲动力。

React是2013年Facebook发布的一个前端库,不仅率先提出了虚拟DOM的概念,更通过时间的考验被业内人士认可其是一款高效且实用的精品软件。React采用了虚拟DOM、Hooks思想和diff深度优先。React使用Fiber架构来减低渲染颗粒度,实现增量渲染。由于React Fiber目前的架构属于单向链表,因此只能实现单向查找。

最初的React中从虚拟DOM到真实DOM,用的是递归遍历,这种方法不适用于大型项目,因为只有一个主线程,当主线程被持续占用时,就会造成后面任务的延迟,如果后面任务是需要被立即执行的任务,如动画,那此时用户就会发现动画出现卡顿。React为了改善这种问题,引进了fiber架构,实现增量渲染,即可以根据任务优先级来决定任务执行的顺序,这极大提升了React在处理大型项目时的流畅度。除了虚拟DOM、Fiber架构的革新,针对函数组件,React又创造性地引入了Hooks,Hooks的出现使得函数组件拥有状态、副作用执行等新功能,因此现在的函数组件功能完整,可取代之前的class组件。

React的创新是值得大部分开发人员学习的。目前React最新版本是16.13,本书内容均是来自此版本。当然,React依然处于高速更新中,目前React正在更新的内容包括合成事件、diff算法等。本书的React版虽然不是最新的版本,但是主要目的是帮助读者系统学习React的思想,而不仅仅是API的使用。

为了帮助读者更好地掌握React,本书第1章从ES6基础开始介绍,给出了React重要API的使用方法与样例。对于大型应用,由于React没有通信处理功能,此时就需要借助第三方库,如Redux与React-Redux,路由方面可以使用React-Router,关于这三个库的详细使用,本书第2~4章均有详细讲解。如果读者能够掌握前4章内容,对初步开发React项目就比较有把握了。本书第5章为商城项目实战,此章会引导读者开发一个常见的商城项目,该项目采用当下最流行的umi框架,UI库使用antd4,基于TypeScript开发。开发本项目之前,建议读者先去umi和antd官网了解其基本使用方法,当然对于TypeScript新手来说,直接使用TypeScript开发会有一点吃力,但是类型检测开发是目前的一个流行趋势,以后会被广泛使用,不论是学习还是求职,都有必要掌握。第6章为React原理解析,建议读者重点掌握,学习一个框架的核心就是掌握其原理。第7章为工程化配置,该章内容在构建项目和优化配置方面非常重要,建议结合第5章内容学习掌握。

任何一个框架都有被淘汰的一天,React也不会例外,但是它提出的创新思维和源代码编写方法,值得所有从业者学习借鉴,以此来扩展开发人员的思路,帮助读者成为一个优秀的开发者,而不仅仅是代码的搬运工。本书或许没有那么简单易懂,很多地方需要读者花一些心思去理解,但学习React就是要经历这样的过程,希望读者耐心学习理解,逐步提升React开发和实战能力。

本书每章都配有专属二维码,读者扫描后即可观看作者对于本章重要知识点的讲解视频。扫描下方的开课吧公众号二维码将获得与本书主题对应的课程观看资格及学习资料,同时可以参与其他活动,获得更多的学习课程。此外,本书配有源代码资源文件,读者可登录https://github.com/kaikeba免费下载使用。

限于时间和作者水平,书中难免有不足之处,恳请读者批评指正。

编者