React进阶之路 - (EPUB全文下载)
文件大小:0.14 mb。
文件格式:epub 格式。
书籍内容:
React进阶之路
第1篇 基础篇 React,一种革命性的UI开发理念
第1章 初识React
第2章 React基础
第3章 React 16新特性
第2篇 进阶篇 用好React,你必须要知道的那些事
第4章 深入理解组件
第5章 虚拟DOM和性能优化
第6章 高阶组件
第3篇 实战篇 在大型Web应用中使用React
第7章 路由:用React Router开发单页面应用
第8章 Redux:可预测的状态管理机
第9章 Redux项目实战
第10章 MobX:简单可扩展的状态管理解决方案
第11章 MobX项目实战
第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 ............
以上为书籍内容预览,如需阅读全文内容请下载EPUB源文件,祝您阅读愉快。
书云 Open E-Library » React进阶之路 - (EPUB全文下载)