React+进阶之路（高清PDF下载）

内容简介

本书详细介绍了React技术栈涉及的主要技术。本书分为基础篇、进阶篇和实战篇三部分。基础篇主要介绍React的基本用法，包括React 16的新特性;进阶篇深入讲解组件state、虚拟DOM、高阶组件等React中的重要概念，同时对初学者容易困惑的知识点做了介绍;实战篇介绍 React Router、Redux和MobX 3个React技术栈的重要成员，并通过实战项目讲解这些技术如何和React结合使用。

本书示例丰富、注重实战，适用于从零开始学习React的初学者，或者已经有一些React使用经验，但希望更加全面、深入理解React技术栈的开发人员。阅读本书，需要先掌握基础的前端开发知识。

第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声明一个只读的常量，一旦声明，常量的值就不能改变。例如∶

// let示例
{
var a = 1; 
let b= 2; 
}
a        //1 
b        // ReferenceError: b is not defined.

//const示例 
const c = 3;
c = 4;      //TypeError: Assignment to constant variable.

2. 箭头函数

ES 6允许使用"箭头"（=>）定义函数。这种方式创建的函数不需要 function 关键字，并且还可以省略return关键字。同时，箭头函数内的 this指向函数定义时所在的上下文对象，而不是函数执行时的上下文对象。例如∶

var f = a => a + 1;
//等价于
var f = function(a){ 
  return a + 1;
}
function foo(){ 
  this.bar = 1;
  this.f = (a) => a + this.bar;
}
//等价于 
function foo(){
  this.bar = 1;
  this. f =(function(a){
   return a + this.bar
  }).bind(this);
}

如果箭头函数的参数多于1个或者不需要参数，就需要使用一个圆括号代表参数部分。例如∶

var f=()=> 1; var f = (a,b)=> a + b;

如果函数体内包含的语句多于一条，就需要使用大括号将函数体括起来，使用return语句返回。例如∶

var f =(x, y)=>{ 
  x++; 
  y--; 
  return x + y;
}

3.模板字符串

模板字符串是增强版的字符串，用反引号（`）标识字符串。除了可以当作普通字符串使用外，它还可以用来定义多行字符串，以及在字符串中嵌入变量，功能很强大。例如∶

//普通字符串
`React is wonderful !`

//多行字符串' 
JS is wonderfulÄ! React is wonderful!'

//字符串中嵌入变量 
var name = "React";
'Hello,${name}!';

4.解构赋值

ES 6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构。例如∶

【下载地址】

链接：https://pan.baidu.com/s/1LyXDj53TQ52nDpFWNyeU4g

提取码：b7cn