React全栈++Redux+Flux+webpa

内 容 简 介

本书从现代前端开发的标准、趋势和常用工具入手，由此引出了优秀的构建工具 webpack 和 JavaScript库 React，之后用一系列的实例来阐述两者的特色、概念和基本使用方法。随着应用复杂度的增加，进而介绍了 Flux 和 Redux 两种架构思想，并且使用 Redux 对现有程序进行改造，最后介绍了在开发过程中出现的反模式和性能优化方法。

本书适合有一定前端开发尤其是 JavaScript 基础的读者阅读，如果您还没有接触过前端开发这个领域，请先阅读前端开发的入 门书籍。

第 1章 现代前端开发

前端开发现在在经历急速发展的阶段。随着应用场景越来越广，需求越来越复杂，社区和官方也在不断地将其规范化和工程化。在本章中，会给读者介绍目前前端开发的发展现状和一些优秀的工具。如果你还在使用比较古老的开发方式，那么不妨跟随步伐，了解一下现阶段的发展。

本章会从 3 个方面介绍现代的前端开发技术，作为了解 React 和 webpack 的背景知识。

● ES6——新一代的 JavaScript 语言标准。

● Component 组件和模块的发展历程。

● 前端开发的常用工具∶

— 包管理器（Package Manager），用来下载和管理前端代码库。— 任务流工具（Task Runner），用来执行一系列开发中的任务。— 模块打包工具（Bundler），用来转换和合并前端代码的模式。

1.1 ES6——新一代的 JavaScript 标准

JavaScript 这门脚本语言一直被人诟病（所以薄薄的一本《JavaScript 语言精粹》让很多读者奉为圣经），再加上浏览器兼容性的问题，令很多前端开发者感到特别苦恼。如今前端开发发展又如此迅速，这促使了 ECMA 组委会在修订 JavaScript 语言新版本时， 不仅在质量上不断加以完善，同时加快了更新的速度。

ES6（或者被称为 ES2015）被称为 JavaScript 历史上最重大的一次变革，该标准最终敲定于2015 年6月，提供了非常多语言级别新的特性。这是一个可以载入前端发展史册的重大事件。本书全面使用了ES6 标准，在这里会简单描述一些在本书中使用的 ES6 的特性，给读者一个关于最新标准的直观概念。如果想了解更多变化和特性，建议阅读阮一峰老师编写的《ECMAScript 6 入门》。

1.1.1 语言特性

1. const、let 关键字

众所周知，在 JavaScript 中，变量默认是全局性的，只存在函数级作用域，声明函数曾经是创造作用域的唯一方法。这点和其他编程语言存在差异，其他语言大多数都存在块级作用域。所以在 ES6 中，新提出的 let 关键字使这个缺陷得到了修复。

if (true) 
( let a = 'name';' 
）
console.log(name);
// ReferenceError: a is not defined

同时还引入的概念是 const，用来定义一个常量，一旦定义以后不可以修改，不过如果是引用类型的，那么可以改变它的属性。

const MYNAME ='viking'; 
MYNAME ='kitty';
// "CONSTANTr" is read-only 
const MYNAME = {foo: 'viking'}; 
MYNAME. foo ='kitty';
//可以正常运行

2.函数● 箭头函数

箭头函数是一种更简单的函数声明方式，可以把它看作是一种语法糖，箭头函数永远是匿名的。

let add = (a,b) =>(return a + b;)
//当后面是表达式（expression）的时候，还可以简写成 
let add = (a,b) => a + b;
//等同于
let add = function(a,b) { 
return a + b;
//在回调函数中应用 
let numbers = [1,2,3];
let doubleNumbers= numbers.map((number)=> number * 2); 
console.log (doubleNumbers);
//【2，4，6】 

看起来很简便吧● this 在箭头函数中的使用在工作中经常会遇到这样的问题，就是 this 在一个对象方法中嵌套函数。

let age = 2; 
let kitty = { 
  age: 1,
  grow: function() { 
    setTimeout (function (){ 
       console.1og(++this.age);
   },100); 
  }
}；

kitty.grow ();
//3

在对象方法的嵌套函数中，this 会指向 global 对象，这被看作是 JavaScript在设计上的一个重大缺陷，一般都会采用一些 hack 来解决它，如下。

let kitty = { 
age: 1,
  grow: function(){ 
   const self = this; 
     setTimeout (function () ( console.log(++self.age);
   } 100};
}

【下载地址】

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

提取码：6gtu