React全栈：Redux+Flux+webpack+Babel整合开发

一、现代前端开发

A.ES6——新一代的JavaScript标准

1.const、let关键字：let块级作用域，const常量（如果是引用类型，那么可以修改它的属性）

2.函数：

• 箭头函数：一种更简单的函数声明方式，可以看作是一种语法糖，永远是匿名的，如let add = (a,b)=>a+b
• 在对象方法的嵌套函数中，this的作用域指向global对象，而箭头函数没有这个问题
• 函数增加默认参数功能
• Rest参数：function test(…args){}，表示没有指定变量名称的参数数组（arguments是所有参数的集合），是一个真正的数组（arguments不是一个真正的数组）

3.展开操作符：Rest参数就是展开操作符，允许一个表达式在某处展开

4.模板字符串：`My name is ${name}`，使用`符号

5.解构赋值：

• 类似于php中的list(a,b)=[]
• let foo = [1,2,3]; let [a,b,c] = foo;
• let baz = {a:1,b:2}; let {a,b} = baz;

6.类：提供了class语法糖，只是原来原型链方式的一种语法糖

7.模块

• 使用import和export关键字完成模块的导入和导出

B.使用Babel

1.Babel可以提前使用语言新特性，是一种多用途的js编译器，把最新版本的js编译成当下可以执行的版本

2.核心概念是通过一系列的plugin来管理编译规则，通过不同的plugin，不仅可以编译ES6代码，还可以编译React JSX语法或者是CoffeeScript等

C.前端组件化方案

1.模块是语言层面的，在前端领域我们说的module一般都是指JS module，往往表现为一个单独的JS文件；前端组件则更多是业务层面的概念，可以看成是一个可独立使用的功能实现，往往表现为一个UI部件（并不绝对）

2.JS模块化方案：

• 全局变量+命名空间(namespace)：一般通过简单的自执行函数实现局部作用域，避免污染全局作用域（jQuery）
• AMD&CommonJS：AMD仅需要在全局环境下定义require与define，通过文件路径或文件名定位模块，模块实现中声明依赖，加载与执行均由加载器操作，提供了打包工具自动分析依赖并合并；CommonJS不适合浏览器环境，相比AMD更简洁，可以方便的实现前后端代码共用
• ES6模块

3.前端组件化方案：

• 基于命名空间的多入口文件组件：基于全局变量+命名空间的模块化方案，不同资源分别手动引入，类似于jQuery的插件
• 基于模块的多入口文件组件：使用AMD规范，把自己暴露为一个模块
• 单JS入口组件：browserify、webpack等打包工具，允许将一般资源视为JS平等的模块以致的方式加载进来
• Web Component：尚未确定，支持不够

D.辅助工具

1.包管理器：npm

• 查看全局的包安装位置：npm prefix -g
• package.json：dependencies，在生产环境中需要依赖的包（—save）；devDependencies，仅在开发测试环节中需要依赖的包（—save-dev）；

2.任务流工具（Task Runner）：Grunt和Gulp

• Grunt，使用插件机制和Gruntfile.js实现了多任务配置、组合和运行（npm install grunt-cli -g）
• Glup，吸取了Grunt的优点，通过流的概念来简化多个任务之间的配置和输出，让任务更加简洁和易于上手（npm install glup-cli -g）

3.模块打包工具：Bundler、webpack

• Bundler的主要任务是突破浏览器的鸿沟，将各种格式的JS代码甚至是静态文件，进行分析、压缩、合并、打包，最后生成浏览器支持的代码

二、webpack

A.webpack的特点与优势

1.RequireJS的特点：

• 对CommonJS规范（Node.js模块所采用的规范）的模块代码进行的转换与包装
• 对很多Node.js的标准package进行了浏览器端的适配，只要是遵循CommonJS规范的JavaScript模块，即使是纯前端代码，也可以使用它进行打包

2.webpack的特色

• 代码拆分（code splitting）方案：可以将应用代码拆分为多个块（chunk），每个块包含一个或多个模块，块可以按需被异步加载
• 智能的静态分析：支持包含变量的简单require表达式
• 模块热替换（Hot Module Replacement）：使得在修改完某一模块后无须刷新页面，即可动态将受影响的模块替换为新的模块，在后续的执行中使用新的模块逻辑，通过—hot启动webpack-dev-server即可

B.基于webpack进行开发

1.webpack主要做了两部分工作：

• 分析得到所有必需模块并合并
• 提供了让这些模块有序、正常执行的环境

2.loader是作用于应用中资源文件的转换行为。它们 是函数（运行在Node.js环境中），接收资源文件的源代码作为参数，并返回新的代码

3.使用style-loader、css-loader会让样式代码延后与js同时加载，用户体验不好，可以借助extract-text-webpack-plugin插件，在打包时将样式内容抽取并输出到额外的css文件中

4.plugin的存在可以看成是为了实现那些loader实现不了或不适合在loader中实现的功能，如自动生成项目的HTML页面（HtmlWebpackPlugin）、向构建过程中注入环境变量（EnvironmentPlugin）、向块（chunk）的结果文件中添加注释信息（BannerPlugin）等

5.webpack -w，实时构建，热替换：webpack-dev-server

三、初识React

1.三大特点：

• 组件：React的一切都是基于组件的，唯一要关心的就是构建组件。组件有着良好的封装性，让代码的利用、测试和分离都变得更加简单
• JSX：一种直接把HTML嵌套在JS中的写法，被称为JSX。它可以定义类似HTML一样简洁的树状结构，结合了js和HTML的优点，可以像平常一样使用HTML，也可以在里面嵌套js语法，在浏览器中不能直接使用这种格式，需要添加JSX编译器
• Virtual DOM：在React中，开发者不太需要操作真正的DOM节点，每个React组件都是用Virtual DOM渲染的，它是一种对于HTML DOM节点的抽象描述

A.使用React与传统前端开发的比较

1.React会使用diff，计算出变化的部分，再将变化的部分作用到真实的DOM上，实现最终页面的更新

2.React的事件绑定表现为，值为回调函数的组件属性(props)。好处是，绑定事件的过程自然地变成了界面渲染（render）的一部分，无须特别处理

B.JSX

1.JSX类似一种语法糖，把标签类型的写法转换成React提供的一个用来创建ReactElement的方法

2.HTML类型的标签第一个字母用小写来表示，React组件标签第一个字母用大写来表示

3.当遇到传入的属性是{}表达式时，里面的代码会被当作JS代码处理；在JSX中，遇到标签就解释成组件或者HTML标签，遇到{}就解释为JS代码来执行

4.子组件位置的注释需要使用{/* … */}

5.使用扩散操作符（...）可以进行属性扩散，需要注意参数顺序

6.使用Babel编译JSX

C.React+webpack开发环境

*webpack2，没有preLoaders了，使用rules，另外eslint的airbnb报错

D.组件

1.组件是React的基石，所有的React应用程序都是基于组件的

2.state是组件内部的属性，组件本身是一个状态机，它可以在constructor中通过this.state直接定义它的值，然后根据这引起值来渲染不同的UI

3.组件生命周期

• 组件首次加载：装载前调用（getDefaultProps、getInitialState）、render前（componentWillMount）、render是组件的必要方法，返回一个ReactElement对象，装载完成之后（componentDidMount）
• 组件props更新：componentWillReceiveProps(next)接收到新的props的时候触发，shouldComponentUpdate在重新render之前调用，componentWillUpdate在render之前被调用，componentDidUpdate重新渲染完成之后立即调用
• 组件卸载：componentWillUnmount在组件被卸载和销毁之前调用

4.state设计原则：尽量让大多数的组件都是无状态的，应该尽量把状态分离在一些特定的组件中，来降低组件的复杂程度；state中应该包含组件的事件回调函数可能引发UI更新的这类数据；不应该包含在state中的数据：可以由state计算得出的数据；组件；props中的数据

5.节点上设置一个ref属性，然后通过this.refs.name获得对应的DOM结构

E.Virtual DOM

1.Virtual DOM是独立React所存在的，只不过React在渲染的时候采用了这个技术来提高效率

2.ReactElement是一种轻量级的、无状态的、不可改变的、DOM元素的虚拟表述，其实就是用一个JS对象来表述DOM元素而已，将ReactElement插入真正的DOM中，可以调用ReactDOM的render方法

四、实践React

1.state的设计原则：尽量简化数据，遵循DRY(Don’t Repeat Yourself)的原则

2.通用测试工具：Mocha、Chai

五、Flux架构及其实现

1.Flux是Facebook官方提出的一套前端应用架构模式，核心概念就是单向数据流

2.传统MVC是双向数据流，单向数据流是Action->Dispatcher->Store->View

3.Flux优缺点：会增加代码量，引入了大量的概念和文件，带来了清晰的数据流，合理地把数据和组件的state分离，保持了清晰的逻辑，数据流动更加明了，提供可预测的状态，避免了多向数据流动带来的混乱和维护困难

4.Redux三大定律：单一数据源、state是只读的、使用纯函数执行修改

六、使用Redux

1.Redux着眼于对状态整体的维护，而不会产生出具体变去的部分，React是一个由状态整体出来界面整体的view层实现，非常适合Redux实现

2.当我们说如何使用Redux时，说的其实是如何获取并使用store的内容（状态数据），以及创建并触发action的过程

3.Redux的特点是单一数据源，即整个应用的状态信息都保存在一个store中，因而需要由store将数据从React组件树的根节点传入

七、React+Redux进阶

1.反而模式（anti-pattern或antipattern）指的是在实践中明显出现但又低效或是有待优化的设计械，是用来解决问题的带有共同性的不良方法

2.优化原则：避免过早优化、着眼瓶颈；在优化React时，绝大部分的优化空间在于避免不必要的render—即Virtual DOM节点的生成

https://github.com/zhangyue0503/html5js/tree/master/reactquanzhan