作者：赵荣娇、刘江虹
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
React.js实战试读：
前言
随着互联网技术的发展，前端技术的发展也进入一个新的阶段。早期的网页开发是由后端主导的，前端的操作局限于DOM区域。随着基础设置的不断完善以及代码封装层级的不断提高，使得前端能够完成的事越来越多，前端所需解决的业务场景也越来越复杂。
近几年，前端已经发展到跨端、跨界面的革新阶段，目前主流以基于MVVM、Virtual DOM、前后端同构技术进行开发的项目居多，实现的方向也多种多样。React就是在此基础上发展起来的框架，独特的设计思想所带来的革命性创新让其成为前端新技术的代表。
目前市场上关于React开发及实践的图书不少，但真正从零基础搭建开始，通过语法和小示例指导读者提高开发水平的图书却很少。本书便是以实战为主旨，通过React开发中所需要涉及的基础知识和两个完整的项目案例，让读者全面、深入、透彻地理解React开发的技术栈的整合使用。本书的技术点
本书涵盖npm、Node.js、webpack、ES6、React、JSX、Redux、Jest、Enzyme、Hooks、ESLint、Chrome插件、JavaScript、CSS、ImmutableJS、Perf等热门技术及整个技术站框架的整合使用。
本书最后使用React＋webpack＋ES6组合形式，开发了笔记本和购物车两个完整项目。读者将案例稍加修改，便可用于实际项目开发实践中。本书的内容
本书共有14章，由浅到深地介绍React技术栈中的主要技术，主要内容分为基础篇、进阶篇和实战篇，每一篇内容又分成若干章节来介绍。
第1篇 基础篇（第1～3章）
介绍React的前世今生，以及React开发中涉及的基本概念，包括React的开发环境和开发工具、React的基本用法。每个知识点都有配套的源代码示例。
第2篇 进阶篇（第4～12章）
深入介绍React的几个重要概念，包括React组件、React事件系统、React原理、数据管理、React架构、React服务端渲染等。每章都配有大量示例代码，保证读者学以致用。
第3篇 实战篇（第13～14章）
本篇通过笔记本和购物车两个项目整合使用React技术栈，包括React Router、Redux、SSR，每一个技术都配有详细的项目实战演示。关于封面照片
封面照片由蜂鸟网的摄影家ptwkzj先生友情提供，在此表示衷心感谢。读者对象
·有一定的HTML、CSS、JavaScript基础的网页开发人员；
·希望全面学习React开发的前端开发人员；
·希望提高项目开发水平的人员；
·前端开发培训机构的学员；
·软件开发项目经理；
·需要一本案头必备查询手册的人员。本书作者
本书第1～6章由刘江虹完成，第7～14章由赵荣娇完成。著者2019年5月第1章 React的前世今生
时间追溯到20世纪90年代，网景浏览器的诞生给互联网世界填写了浓墨的一笔，用户可以在浏览器上查阅信息、分享信息，以及和浏览器进行交互等，当时网景浏览器在市场上的份额是占据第一的。后来微软为了瓜分市场，推出了IE浏览器，凭借Windows系统的用户量把网景打败。就在微软觉得稳坐天下的时候，Firefox以及Chrome等优秀浏览器的出现，打破了IE的市场垄断。可见产品是需要不断创新、不断成长的，故步自封终究会被超越。
JavaScript的运行环境就是浏览器，其实前端框架也一直处在一个纷争的世界。目前市面上各种xxx.js的出现，包括Ember.js、Angular.js、Backbone.js、Knockout.js、React.js、Vue.js等，也是纷纷扰扰。前端开发在目前这个互联网环境下还是一个大的趋势，以JavaScript为基础语言的前端框架层出不穷，前端技术的更新也非常之快。当今前端框架格局，就上述提到的框架，可以说Angular、Vue和React三足鼎立。本书主要介绍React。1.1 刀耕火种的年代
所谓刀耕火种，就是在Web开发早期，技术和工具还不成熟，Web开发功能和用户体验非常有限，Web开发人员使用古老的工具耕耘着Web这片广阔的天地。
追溯到Web1.0时代，当时的Web整体架构非常简单，页面基本由Server端生成，然后返回给浏览器，页面的呈现也特别粗糙。最初Web开发是不分前后端的，所有的逻辑都是在服务器端生成。如果业务逻辑比较简单，那这种方式对于开发人员来说是可以接受的。如果业务逻辑非常复杂，这样会出现很多问题，最大的一个缺点就是关系如果变得复杂，就会导致Server非常臃肿，条理不清晰。
直到MVC时代的到来，以后端作为出发点，开始细化模块功能，这个时代催生了一些经典的MVC框架，比如Structs、Spring等。M（Model）层负责数据处理，V（View）层负责界面呈现，C（Controller）层负责处理用户交互功能。这种模式的优点在于开发人员可以各司其职，互不干涉，分工明确。当然也有缺点，View层和Controller层黏度很高，会增加Web开发的复杂度。1.2 Web应用的出现
有了Web2.0这个概念后，互联网开始进入一个新时代。以前用户在浏览器上只能接收文字、图片这样的资讯，处于一个被动接收的角色。在进入Web2.0时代后，Web和用户的交互性加强，类似于桌面程序的Web应用大量涌现，这个时期ajax的诞生拉开了SPA（Single Page Application，单页面应用）序幕。
另外，多媒体的诞生也催生了Web2.0时代的发展，像音频、视频、Flash的出现，可以让网页变得更加绚丽多彩，给用户在视觉和听觉上都带来了不一样的体验。可以说Web2.0时代的到来给Web前端这一块带来了空前的繁荣。1.3 React的诞生
React出生在Facebook。当初Facebook要搭建一个Instagram网站，在选择框架时，对市场上的所有JavaScript的MVC框架都不太满意，于是Facebook自己搞了一套，就是React。后来发现React框架非常好用，便在2013年5月开源了。
React的出现给Web前端开发人员带来了福音，其新颖的创新思路，加上极佳的性能，广受前端开发人员的欢迎。下一章将从零开始讲解React的环境搭建、使用方法以及如何设计的相关知识。
在学习React之前，读者应该对以下知识进行了解：
·Node.js：基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞I/O的模式，使其轻量又高效。
·npm: node的一个包管理工具，主要功能是对node包的安装、卸载、更新、查看等。
·webpack：前端资源加载／打包工具，可以依据模块的依赖关系进行静态分析，按照一定规则将这些模块生成静态资源。
·ES6：也称为ES2015，是在2015年6月发布的JavaScript语言的下一代标准，旨在编写大型应用程序，成为一种企业级开发语言。提示如果读者对ES5比较熟悉，可以使用ES5进行React开发，但是React推荐使用ES6，这在以后是一个趋势，目前Facebook官方推荐的标准是ES6。1.4 npm
在使用任何一个框架之前，必然要经历的一个环节是环境搭建，而npm是配置React环境的必要工具，其在下载各种依赖包时起着重要作用。本节主要为读者解析npm是怎样的一个工具。1.4.1 什么是npm
简单来说npm（Node Package Manager）是包含在Node.js里面的一个包管理工具，如果读者之前使用过Node.js，那对npm应该不会陌生，因为npm会随着Node.js一起安装。npm是世界上最大的软件注册表，其为开发者连接到了一个广阔的JavaScript世界。据官方数据统计，npm大约每周有30亿的惊人下载量，其中包含大约60万个package（代码模块）。
npm为开发者提供了一个代码模块共享的大平台，开发者既可以从npm服务器上下载其他开发人员共享的package，也可以上传自己的package供其他开发者使用。Node.js和npm的环境搭建将在2.2节中详细讲述。1.4.2 理解npm scripts
npm scripts指的是npm脚本，其主要用途是执行配置文件（package.json）中“scripts”属性对应的脚本语句。在理解npm scripts之前，这里先介绍一下package.json文件。
在搭建一个前端项目时，一般在项目的根目录下要生成一个package.json文件，该文件用来定义项目信息、配置包依赖关系。package.json文件可以自己手动创建，也可以用如下命令创建：
这里列举一个简单的package.json文件，如下所示：
上述package.json文件只定义了项目名称和项目版本号。一般情况下，在实际开发中，package.json文件是非常丰富的，接下来列举一个实际开发中比较全面的package.json文件，如下所示：
上述package.json文件内容多了几个字段，private、dependencies、devDependencies和scripts。private指包的私有属性，如果设置为true，则npm会拒绝发布，主要是为了避免私有repositories不小心被发布出去。dependencies、devDependencies两个字段在1.4.3小节介绍，这里主要介绍scripts。
scripts里面放的是npm要执行的命令，格式是key-value形式，为了简化操作，具体命令为value，自定义的简化命令为key，当npm运行key命令时，等同于执行后面的value命令。例如，执行npm run start命令，相当于执行了React-scripts start。
简而言之，package.json配置文件中的脚本，就叫作npm scripts。其实scripts里面的命令可以是任何的shell命令，执行npm run的时候，会自动构建一个shell，脚本都是在shell中执行，所有package.json中的脚本可以是任何可以在shell中有效执行的命令。
也许有读者会有疑问，为什么scripts命令可以直接使用。这里解释一下，npm run在新建一个shell的时候，会将当前目录的node_modules/.bin目录配置到path环境变量中，如果以前用过Java，应该了解在配置jdk时需要将jdk目录配置到path环境变量中才可以全局使用。这里npm是自动将node_modules/.bin配置到了环境变量中。其实上面的scripts字段可以改写为下面的样子：1.4.3 dependencies和devDependencies
在1.4.2小节中介绍package.json文件的内容时提到了dependencies和devDependencies两个字段：
dependencies和devDependencies两个配置字段都是用来安装依赖包的，区别在于前者安装项目运行所依赖的模块，后者安装项目开发所依赖的模块。
在npm安装模块的时候，会有两个命令：
和
第一个命令是用来对应dependencies字段的，第二个命令是对应devDependencies字段的。上述示例中有些模块的版本号之前有个插入号“^”，比如“React“： “^16.2.0“，表示安装React的16.x.x的最新版本（不低于16.2.0），但是不安装17.x.x，也就是说安装时不改变大版本号。如果版本号前面没有任何标识，比如“React-scripts“： “1.1.1“，表示只安装React-scripts的1.1.1版本。提示有时版本号前面会有波浪“～”，例如“～2.2.3”，表示安装2.2.x的最新版本号（不低于2.2.3），但是不安装2.3.x，也就是说安装时不改变大版本号和次版本号。另外，需要注意的是，如果大版本号为0，“～”和“^”的表示作用是一样的。1.5 webpack
在没有出现模块管理器之前的前端开发，如果要引用依赖资源，通常的做法是将依赖文件引用到.html文件中。比如，要引用js文件，在.html文件中用＜script＞标签引用；引用.css文件，在.html文件中用＜link＞标签引用。这样做的弊端是，如果引用的资源文件太多，请求太多，会拖慢网页加载速度，影响用户体验，另外也会使网页体积臃肿、不便维护。随着模块管理器的出现，上述问题得到解决。目前市面上流行的包管理器有很多，比如Bower、Browserify、webpack等，本书主要讲解webpack这个前端的包管理器，其他工具的用法和webpack大同小异，读者自行网上学习即可。提示之前引用的.js文件或.css文件即可理解为模块。
webpack主要有4个核心概念：
·入口（entry）：webpack所有依赖关系图的起点。
·出口（output）：指定webpack打包应用程序的地方。
·加载器（loader）：指定加载的需要处理的各类文件。
·插件（plugins）：定义项目要用到的插件。1.5.1 为什么需要webpack
移动互联网时代的网站正在慢慢演化为Web APP，这种局势愈演愈烈，读者应该能感受到Web前端发展之迅速，浏览器在不断强大，JavaScript的新标准ES6也在2015年制定，各种流行的JS框架问世，发展着实快。另外，现在的Web前端更倾向单页面应用（SPA），要求的页面刷新越来越少，这样庞大的代码量如果管理不好就会导致很多的后续问题，比如各个模块耦合度变高、很难维护等。这样就催生了模块管理器。
webpack是前端的一个模块管理工具，其可依据各个模块之间的依赖关系进行静态分析，然后将这些模块按照相应规则生产静态资源供项目调用。可以通过图1-1来理解webpack是做什么的。图1-1 webpack示意图
可以看出，webpack可以将具有各种依赖关系的静态模块转化成一个独立的静态模块，这样做的好处是大大减少了请求次数，提高了网页的性能，用户体验也随之提高。
webpack的另一个作用是可以把目前一些浏览器解释不了的语言进行编译，转换成浏览器可以识别的内容。React的所有代码示例都以ES6标准讲解，ES6的有些语法目前在一些主流的浏览器上还不支持，需要对webpack进行一些配置后，React才可正常运行。1.5.2 webpack入口和出口
webpack的四大要素即entry、output、loader和plugins，在讲解这几个要素之前，先了解怎么安装webpack。
webpack的安装需要npm来完成，有两种安装方式，命令如下：
或者
安装好之后，就可以使用webpack的命令了。比如现在有一个main.js文件，要将其打包生成一个bundle.js文件，就可以用下面的命令：
一般在实际的项目开发中，要把这些命令写到一个名为webpack.config.js的文件中。
webpack需要处理具有依赖的各个模块，这些模块会构成一个关系图。webpack的入口就是这张关系图的起点，指的就是入口文件。webpack的出口指的是需要把这张关系图导出到哪个文件中，即导出文件。这里以一个具体的webpack.config.js文件讲解，配置如下：
上述webpack.config.js文件只配置了项目的entry和output。在该项目的关系图中，main.js是起点，main.js可能和别的模块存在依赖关系，但是开发者不需要关心这些，寻找依赖、解决依赖是webpack的工作。
entry字段指定入口文件，也可以理解为APP启动时运行的第一个文件。其语法如下：
entry字段可以为一个字符串，也可以是一个字符串数组，所以entry可以指定一个入口文件，也可以指定多个入口文件。
output主要是告诉webpack把整理后的所有资源都放在哪里，指定输出位置。上述示例中，output只指定了filename，其实还可以指定路径path，如果省略path参数，将默认输出到webpack.config.js同级目录下。1.5.3 webpack loader
webpack要完成的任务是把具有依赖关系的各个文件进行整合，然后打包，当然文件类型会有很多种，比如.css、.html、.scss、.jpg等。但是webpack只认识JavaScript，那处理其他类型的文件是如何做到的呢？loader解决了这个问题。
loader在构建文件过程中起着重要的作用，首先loader可以识别出要对哪些文件进行预处理，然后loader转换这些文件添加到bundle（构建后的模块）中。例如，React开发一般使用JSX这种扩展语言来编写，JSX这种格式目前的浏览器是理解不了的，那webpack loader可以在JSX被项目使用之前做一些预处理，可以将其转换为JavaScript语言。示例如下：
上述示例中，test字段表示要对哪些文件进行构建，use字段表示要用哪些模块对类型文件进行构建。在配置loader之前，use中的模块是需要安装的。命令如下：提示在webpack早期版本中，写法是这样的：
webpack最新版本已废弃了loaders、loader的写法，改成了rules、use。这个读者要注意，网上的一些教程是以老版本的标准写的，如果用老版本的写法，那么在运行webpack的时候会报错。1.5.4 webpack plugins
插件的意义一般是用于丰富功能，webpack的plugins就是用来丰富webpack功能的。plugins在webpack中起着重要作用，开发者可以在webpack.config.js配置文件中添加想要的其他插件功能。
webpack plugins的用法很简单，先调用require，然后在plugins字段中用new来定义。提示插件分为webpack自带和第三方这两类，如果是第三方插件，需要在require之前利用npm安装。
例如，现在需要安装一个第三方插件html-webpack-plugin，操作步骤如下。（1）该插件为第三方插件，首先需要npm安装，命令为：（2）然后配置webpack.config.js文件中的plugins：
plugins参数为一个数组，可以传入多个plugin，另外需要注意plugin是可以带参数的，所以plugins属性传入的必须为new实例。1.6 ES6
ECMAScript6（简称ES6）历时将近7年时间，在2015年6月份正式发布，由于这个新标准是在2015年指定，所以ES6也称为ES2015。ES6带来很多新语法、新特性，比如箭头函数（＝＞）、class（类）、模板字符串等。
相对ES5（2009年指定的ECMAScript标准）来说，ES6旨在以新语法和新特性来提高ECMAScript的开发效率，ES6的别名被定义为Harmony（和谐），读者应该也能体会到，ES6注定要带来一次优雅的编程变革，本节主要介绍ES6的一些新特性。1.6.1 函数的扩展
ES6函数扩展的新特性给编程人员和阅读代码人员带来了很多便利之处，以前ECMAScript的函数形式看起来有点丑陋，并且在一些使用方面限制也较多。本小节主要讲述ES6在函数上都做了哪些扩展。1. 函数参数默认值
在前端开发中，有时候需要写一些组件供其他开发者调用，这时需要提供对外接口。对外接口参数的传入由调用者决定，如果在调用对外接口时，没有传参，该怎么处理？ES6之前的函数参数默认值是这样实现的，代码如下：【示例1-1】
以前只能以这种变通的方式来帮助函数处理参数默认值，ES6提供了新的语法标准，使得函数参数默认值的处理变得简洁，代码如下：【示例1-2】2. 剩余（rest）参数
ES6发布之前，ECMAScript对函数的定义中存在一个arguments对象，该对象可以访问传入的参数列表。例如，要实现一个求和函数，以前ECMAScript的写法是这样的：【示例1-3】
上面示例是ES6之前实现求和功能的写法。提示arguments是一个类数组对象，不是一个真正的数组，所以需要使用Array.prototype.slice.call（）方法将其转换成数组对象。
ES6在剩余参数上提供了新的语法标准，就上述求和功能，ES6可以这么写：【示例1-4】
剩余参数的语法为：
上述示例中，…values为剩余参数，调用该函数时，参数个数可以是不确定的。剩余参数是一个真正的数组，所以不需要转换，而且所有的数组特性剩余参数都具有。提示在使用剩余参数语法时，剩余参数后面是不可以再有参数的，否则会报错，比如“Function fn1（…rest, arg）｛｝／／”这种写法是错误的。3. 箭头函数
所谓箭头函数，就是利用箭头（＝＞）来定义函数，属于匿名函数一类，如果读者了解过CoffeeScript（JavaScript的衍生语言），就不会对箭头函数陌生了。由于箭头函数在实现一些功能上比较简洁方便，所以这一个特性的使用率非常高。
箭头函数的语法也非常简单：
箭头前面是参数，后面是实现语句。例如：
上述功能用ES6的箭头函数可以写为：
如果参数有多个，并且实现语句也有很多，那参数需要用小括号“（）”括起来、用逗号隔开，多条实现语句用大括号“｛｝”括起来。假如要实现一个多数求和功能，可以这么写：提示箭头函数中大括号中的内容是被解释为代码块的，如果在大括号中返回一个对象，需要在对象外面再加一个小括号，例如：1.6.2 对象的扩展
ES6之前的ECMAScript虽然说是面向对象语言，但其并没有像Java语言那样有类的概念，所以之前的ECMAScript编程不是完全面向对象编程，在对象的各种功能方面比较弱化。ES6标准给予了对象一些扩展，极大地提高了ECMAScript对象的可操作性。1. 属性简化
项目中会经常遇到这种情况，一个函数的返回值有多个，以前的前端工程师可能会利用对象字面量或数组来模拟该功能，代码如下：【示例1-5】
试读结束[说明：试读内容隐藏了图片]