作者：徐超
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
React进阶之路试读：
前言
当今，前端应用需要解决的业务场景正变得越来越复杂，这也直接推动了前端技术的迅速发展，各种框架和类库日新月异、层出不穷。面对众多的框架和类库，前端开发者可能感到眼花缭乱，但换一个角度来看，这未尝不是一种百家争鸣的现象。不同框架和类库的设计思想和设计理念各有千秋，解决的问题也有所不同，这些多元化和差异化不断推动前端技术的发展，同时也是前端技术领域的一份思想瑰宝。
React作为当今众多新技术的一个代表，由Facebook开源，致力于解决复杂视图层的开发问题，它提出一种全新的UI组件的开发理念，降低了视图层的开发复杂度，提高了视图层的开发效率，让页面开发变得简单、高效、可控。此外，React不仅是单一的类库，更是一个技术栈生态，可以和生态中的Redux、MobX等其他技术结合使用，构建可扩展、易维护、高性能的大型Web应用。本书内容
本书涵盖React技术栈中的主要技术，内容由浅到深。本书内容分为基础篇、进阶篇和实战篇，每一篇内容又分成若干章节来介绍。
基础篇，介绍了React的基本概念，包括React的开发环境和开发工具、React的基本用法和React 16的新特性。每个知识点都有配套的项目示例。
进阶篇，深入介绍了React的几个重要概念，如组件state、虚拟DOM、高阶组件等，此外，还针对初学者使用React时容易产生困惑的知识点做了专门讲解，如组件与服务器通信、组件之间通信、组件的ref属性等。
实战篇，介绍了React技术栈中最重要的三个技术：React Router、Redux和MobX，每一个技术都配有详细的项目实战示例。
本书章节的难度逐步递增，各章节的知识存在依赖关系，所以读者需按照章节顺序阅读本书，不要随意跳跃章节，尤其是在阅读实战篇时，务必保证已经掌握了基础篇和进阶篇的内容，否则，阅读实战篇可能会有些吃力。本书特点
本书的特点是内容全、知识新、实战性强。
内容全：本书不仅详细介绍了React的使用，还详细介绍了React技术栈中最常用的其他相关技术：React Router、Redux和MobX。
知识新：本书介绍的知识点都是基于各个框架、类库当前的最新版本，尤其是涵盖React 16的新特性和React Router 4的介绍。对于新版本已经不再支持或建议废弃的特性，本书不会再介绍，确保读者所学知识的时效性。
实战性强：本书配有大量示例代码，保证读者学以致用。实战篇使用的简易BBS项目示例接近真实项目场景，但又有所简化，让读者既可以真正理解和领会相关技术在真实项目中的使用方式，又不会因为示例项目过于复杂而影响学习。本书目标读者
本书面向希望从零开始学习React的初学者，或者已经有一些React使用经验，希望更加全面、深入理解React技术栈的开发人员。示例代码
本书的示例代码下载地址为https://github.com/xuchaobei/react-book。如果读者发现代码或者书中的错误，可以直接在该代码仓库提交issue。
本书中默认的开发环境是Node.js v8.4.0，书中介绍到的几个主要库的版本分别为React 16.1.1、React Router 4.2.2、Redux 3.7.2及MobX 3.3.1。致谢
本书的完成离不开在各个方面给过我支持和帮助的人，请允许我在这里向他们表示感谢。
首先，感谢公司的领导余海峰（Colin）和贺鸣（Sky）对我写书的支持。Colin在百忙之中还抽出时间为本书作序。
其次，感谢我的同事王博、陈小梦、吴福城、詹敏和朱雅琴，他们给本书提出了很多宝贵的意见。
还要感谢我的老婆，2017年，她的新书《时间的格局：让每一分钟为未来增值》出版，这也让我产生了写书的念头，同时她的写书经验也给了我很多帮助。
最后，感谢清华大学出版社的王金柱老师，正是缘于他的主动联系，才让我写书的念头变成了行动。他认真、负责的工作态度也保证了本书的顺利问世。联系作者
欢迎各位读者通过我的微信订阅号：老干部的大前端（ID：Broad_FE）和我进行沟通交流，订阅号还提供了更多的大前端学习资源。读者可以扫描下方二维码关注订阅号。徐 超2018年1月1日于上海第1篇 基础篇React，一种革命性的UI开发理念第1章初识React
当今，Web应用的业务场景正在变得越来越复杂，几乎所有应用都在尝试或者已经在Web上使用，同时，用户对Web应用的体验要求也越来越高，这一切都给前端开发人员开发前端界面带来了巨大的挑战。而Facebook开源的React技术创造性地提出了一种全新的UI开发理念，让UI开发变得简单、高效、可控。React自开源以来，迅速风靡整个前端世界，推动前端开发有了革命性的进步。1.1 React简介
前端UI的本质问题是如何将来源于服务器端的动态数据和用户的交互行为高效地反映到复杂的用户界面上。React另辟蹊径，通过引入虚拟DOM、状态、单向数据流等设计理念，形成以组件为核心，用组件搭建UI的开发模式，理顺了UI的开发过程，完美地将数据、组件状态和UI映射到一起，极大地提高了开发大型Web应用的效率。
React的特点可以归结为以下4点：（1）声明式的视图层。使用React再也不需要担心数据、状态和视图层交错纵横在一起了。React的视图层是声明式的，基于视图状态声明视图形式。但React的视图层又不同于一般的HTML模板，它采用的是JavaScript（JSX）语法来声明视图层，因此可以在视图层中随意使用各种状态数据。（2）简单的更新流程。React声明式的视图定义方式有助于简化视图层的更新流程。你只需要定义UI状态，React便会负责把它渲染成最终的UI。当状态数据发生变化时，React也会根据最新的状态渲染出最新的UI。从状态到UI这一单向数据流让React组件的更新流程清晰简洁。（3）灵活的渲染实现。React并不是把视图直接渲染成最终的终端界面，而是先把它们渲染成虚拟DOM。虚拟DOM只是普通的JavaScript对象，你可以结合其他依赖库把这个对象渲染成不同终端上的UI。例如，使用react-dom在浏览器上渲染，使用Node在服务器端渲染，使用React Native在手机上渲染。本书主要以React在浏览器上的渲染为例介绍React的使用，但你依然可以很容易地把本书的知识应用到React在其他终端的渲染上。（4）高效的DOM操作。我们已经知道虚拟DOM是普通的JavaScript对象，正是有了虚拟DOM这一隔离层，我们再也不需要直接操作又笨又慢的真实DOM了。想象一下，操作一个JavaScript对象比直接操作一个真实DOM在效率上有多么巨大的提升。而且，基于React优异的差异比较算法，React可以尽量减少虚拟DOM到真实DOM的渲染次数，以及每次渲染需要改变的真实DOM节点数。
虽然React有这么多强大的特性，但它并不是一个MVC框架。从MVC的分层来看，React相对于V这一层，它关注的是如何根据状态创建可复用的UI组件，如何根据组件创建可组合的UI。当应用很复杂时，React依然需要结合其他库（如Redux、MobX等）使用才能发挥最大作用。1.2 ES 6语法简介
ES 6是JavaScript语言的新一代标准，加入了很多新的功能和语法。React的项目一般都是用ES 6语法来写的，这也是Facebook官方推荐的方式。为保证本书知识体系的完整性，本节我们会对开发React应用经常用到的ES 6语法做简要介绍。1．let、const
let和const是ES 6中新增的两个关键字，用来声明变量，let和const都是块级作用域。let声明的变量只在let命令所在的代码块内有效。const声明一个只读的常量，一旦声明，常量的值就不能改变。例如：2．箭头函数
ES 6允许使用“箭头”（=>）定义函数。这种方式创建的函数不需要function关键字，并且还可以省略return关键字。同时，箭头函数内的this指向函数定义时所在的上下文对象，而不是函数执行时的上下文对象。例如：
如果箭头函数的参数多于1个或者不需要参数，就需要使用一个圆括号代表参数部分。例如：
如果函数体内包含的语句多于一条，就需要使用大括号将函数体括起来，使用return语句返回。例如：3．模板字符串
模板字符串是增强版的字符串，用反引号（`）标识字符串。除了可以当作普通字符串使用外，它还可以用来定义多行字符串，以及在字符串中嵌入变量，功能很强大。例如：4．解构赋值
ES 6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构。例如：
函数的参数也可以使用解构赋值。例如：
解构同样适用于嵌套结构的数组或对象。例如：5．rest参数
ES 6引入rest参数（形式为...变量名）用于获取函数的多余参数，以代替arguments对象的使用。rest参数是一个数组，数组中的元素是多余的参数。注意，rest参数之后不能再有其他参数。例如：6．扩展运算符
扩展运算符是三个点（...），它将一个数组转为用逗号分隔的参数序列，类似于rest参数的逆运算。例如：
扩展运算符还常用于合并数组以及与解构赋值结合使用。例如：
扩展运算符还可以用于取出参数对象的所有可遍历属性，复制到当前对象之中。例如：7．class
ES 6引入了class（类）这个概念，新的class写法让对象原型的写法更加清晰，也更像传统的面向对象编程语言的写法。例如：
class之间可以通过extends关键字实现继承，例如：8．import、export
ES 6实现了自己的模块化标准，ES 6模块功能主要由两个关键字构成：export和import。export用于规定模块对外暴露的接口，import用于引入其他模块提供的接口。例如：
本节介绍的ES 6语法是后面我们介绍React时经常用到的语法，且只介绍了最基本的用法，如果读者想了解ES 6完整的语法知识，请自行查阅相关文档学习。1.3 开发环境及工具介绍“工欲善其事，必先利其器”。开发React应用需要一个由众多开发工具组建成的开发环境，这个复杂的开发环境也大大提高了应用的开发和调试效率。本节将简要介绍本书使用到的相关开发工具。1.3.1 基础环境1．Node.js
Node.js是一个JavaScript运行时，它让JavaScript在服务器端运行成为现实。React应用的执行并不依赖于Node.js环境，但React应用开发编译过程中用到的很多依赖（例如NPM、Webpack等）都是需要Node.js环境的。所以，在开发React应用前，需要先安装Node.js。Node.js的官方下载地址为https://nodejs.org。本书使用的Node.js的版本号为v8.4.0，建议读者安装的Node.js的版本不要低于本书使用的版本。2．NPM
NPM是一个模块管理工具，用来管理模块的发布、下载及模块之间的依赖关系。开发React应用时，需要依赖很多其他的模块，这些模块就可以通过NPM下载。NPM已经集成到Node.js的安装包中，所以不需要单独安装。另外，Facebook联合Exponent、Google和Tilde共同推出了另一个模块管理工具Yarn（https://yarnpkg.com），可以作为NPM的替代工具。本书使用的是NPM。1.3.2 辅助工具1．Webpack
Webpack是用于现代JavaScript应用程序的模块打包工具。Webpack会递归地构建一个包含应用程序所需的每个模块的依赖关系图，然后将所有模块打包到少量文件中。Webpack不仅可以打包JS文件，配合相关插件的使用，它还可以打包图片资源和样式文件，已经具备一站式的JavaScript应用打包能力。Webpack本身就是一个模块，因此可以通过NPM等模块管理工具安装。2．Babel
我们已经提到，React应用中会大量使用ES 6语法，但是目前的浏览器环境并不完全支持ES 6语法。Babel是一个JavaScript编译器，它可以将ES 6及其以后的语法编译成ES 5的语法，从而让我们可以在开发过程中尽情使用最新的JavaScript语法，而不需要担心代码无法在浏览器端运行的问题。Babel一般会和Webpack一起使用，在Webpack编译打包的阶段，利用Babel插件将ES 6及其以后的语法编译成ES 5语法。3．ESLint
ESLint是一个插件化的JavaScript代码检测工具，它既可以用于检查常见的JavaScript语法错误，又可以进行代码风格检查，从而保证团队内不同开发人员编写的代码都能遵循统一的代码规范。使用ESlint必须要指定一套代码规范的配置，然后ESlint就会根据这套规范对代码进行检查。目前，业内比较好的规范是Airbnb的规范，但这套规范过于严格，并不一定适合所有团队。在实际使用时，可以先继承这套规范，然后在它的基础上根据实际需求对规范进行修改。4．代码编辑器
你可以在任何编辑器上编写React应用的代码，但一款好的编辑器能大大提高你的开发效率。本书推荐使用微软出品的Visual Studio Code（简称VS Code），它的操作简洁、功能强大，本书中的示例代码均在VS Code中完成，读者可自行到官方网站下载安装，地址为：https://code.visualstudio.com。此外，Sublime Text、Atom和WebStorm也是使用较多的代码编辑器。1.3.3 Create React App
Webpack、Babel等工具是开发React应用所必需的，但这些工具的使用方法又比较烦琐，尤其是Webpack的使用，需要大量篇幅才能介绍清楚。为了避免读者还没有开始使用React，就被各种辅助工具的使用搞得“头晕目眩”，本书借助React官方提供的脚手架工程Create React App（https://github.com/facebookincubator/create-react-app）创建React应用。Create React App基于最佳实践，将Webpack、Babel、ESlint等工具的配置做了封装，使用Create React App创建的项目无须进行任何配置工作，从而使开发者可以专注于应用开发。注意虽然本书没有详细介绍Webpack、Babel等工具，但并不说明它们不重要，事实上，它们是现代Web开发工程化体系中的重要内容。建议读者在掌握React后，系统地学习这些工具。1．安装
打开命令行终端，依次输入以下命令：
通过使用–g参数，我们将create-react-app安装到了系统的全局环境，这样就可以在任意路径下使用它了。2．创建应用
使用create-react-app创建一个新应用，在命令行终端执行：
这时会在当前路径下新建一个名为my-app的文件夹，my-app也就是我们新创建的React应用。3．运行应用
在命令行终端执行：
当应用启动成功后，在浏览器地址栏输入http://localhost:3000即可访问应用，界面如图1-1所示。图1-1
用VS Code打开my-app文件夹，文件夹内的目录结构如图1-2所示。图1-2
node_modules文件夹内是安装的所有依赖模块；package.json文件定义了项目的基本信息，如项目名称、版本号、在该项目下可执行的命令以及项目的依赖模块等；public文件夹下的index.html是应用的入口页面；src文件夹下是项目源代码，其中index.js是代码入口。
index.js导入了模块App.js，修改App.js，将它的render方法修改如下：
保存文件后，可以发现浏览器页面实时进行了更新，这是因为Create React App也包含热加载功能，可实时更新代码变化。新的页面白色背景区域显示“Hello，world!”，如图1-3所示。图1-3
至此，我们完成了第一个React应用。1.4 本章小结
本章介绍了React的基本理念和主要特性，让读者对React先有一个感性的认识。同时还介绍了React开发中常用的ES 6语法、React的相关开发环境和工具，这些都是为后面讲解React作铺垫。从下一章开始，我们将正式介绍React的知识。第2章React基础
本章将对React的基础知识做详细介绍，主要包括：● JSX语法● 组件的概念及使用● 列表渲染● 事件处理● 表单
通过学习本章内容，可以掌握React以组件为核心的基本开发方法。本章还会将每一小节的知识点逐步应用到一个简易BBS的项目实例上，让大家有更深的理解和体会。2.1 JSX2.1.1 JSX简介
JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。
长期以来，UI和数据分离一直是前端领域的一个重要关注点。为了解决这个问题，前端领域发明了模板，将UI的定义放入模板文件，将数据的逻辑维护在JS代码中，然后通过模板引擎，根据数据和模板文件渲染出最终的HTML文件或代码片段。大部分前端框架都实现了自己的模板，要使用这些模板，必须学习它们各自的模板语法，而且对于复杂的UI，模板语法也很难对其进行清晰的描述。
React致力于通过组件的概念将页面进行拆分并实现组件复用。React认为，一个组件应该是具备UI描述和UI数据的完整体，不应该将它们分开处理，于是发明了JSX，作为UI描述和UI数据之间的桥梁。这样，在组件内部可以使用类似HTML的标签描述组件的UI，让UI结构直观清晰，同时因为JSX本质上仍然是JavaScript，所以可以使用更多的JS语法，构建更加复杂的UI结构。2.1.2 JSX语法1．基本语法
JSX的基本语法和XML语法相同，都是使用成对的标签构成一个树状结构的数据，例如：2．标签类型
在JSX语法中，使用的标签类型有两种：DOM类型的标签（div、span等）和React组件类型的标签（在2.2节详细介绍组件的概念）。当使用DOM类型的标签时，标签的首字母必须小写；当使用React组件类型的标签时，组件名称的首字母必须大写。React正是通过首字母的大小写判断渲染的是一个DOM类型的标签还是一个React组件类型的标签。例如：3．JavaScript表达式
JSX可以使用JavaScript表达式，因为JSX本质上仍然是JavaScript。在JSX中使用JavaScript表达式需要将表达式用大括号“{}”包起来。表达式在JSX中的使用场景主要有两个：通过表达式给标签属性赋值和通过表达式定义子组件。例如：
注意，JSX中只能使用JavaScript表达式，而不能使用多行JavaScript语句。例如，下面的写法都是错误的：
不过，JSX中可以使用三目运算符或逻辑与（&&）运算符代替if语句的作用。例如：4．标签属性
当JSX标签是DOM类型的标签时，对应DOM标签支持的属性JSX也支持，例如id、class、style、onclick等。但是，部分属性的名称会有所改变，主要的变化有：class要写成className，事件属性名采用驼峰格式，例如onclick要写成onClick。原因是，class是JavaScript的关键字，所以改成className；React对DOM标签支持的事件重新做了封装，封装时采用了更常用的驼峰命名法命名事件。例如：
当JSX标签是React组件类型时，可以任意自定义标签的属性
试读结束[说明：试读内容隐藏了图片]