【前端笔记】Redux+Flux+webpack+Babel

AMD
Require.js
Node.js
CommonJS
browserify、webpack现代打包工具
ES6

//hello.js
function hello(){
}
export function foo(){
}
export const PI = 3.14;
export let person = {name: 'xiaoming'};
export hello;

//main.js
import { hello } from './hello.js';
import {PI, person} from './hello.js';
import * as util from './hello.js';

util.foo();
hello();

Babel

多用途的JS编译器，将最新版本的js编译成当下浏览器可以执行的版本。
Babel的核心是利用一系列的plugin来管理编译规则，通过不同的plugin，不仅可以编译ES6代码，还能编译React JSX语法等。

module模块和component组件

JS代码格式检测和压缩工具
jshint test.js
uglifyjs test.js -o output.js

Grunt、Gulp //组件打包工具

http://gruntjs.com/getting-started

RequireJS、browserify、webpack //模块打包工具

requirejs

npm install -g requirejs
r.js -o app.build.js

browserify

npm install -g browserify
browserify main.js -o bundle.js

webpack

npm install -g webpack
webpack main.js bundle.js
webpack.config.common.js
webpack.config.dev.js
webpack.config.dis.js

webpack-loader

npm install --save-dev style-loader css-loader
require('style-loader!css-loader!./index.css')

webpack-plugin

npm install --save-dev html-webpack-plugin webpack style-loader css-loader

React

Facebook推出的一个JS库
组件化、JSX语法、Virtual DOM

webpack、webpack-dev-server、babel-core、babel-loader、babel-preset-es2015、babel-preset-react、eslint【代码规范检查工具】、eslint-loader、eslint-plugin-import、eslint-plugin-react、eslint-plugin-jsx-a11y、eslint-config-airbnb

组件热加载 [Hot Module Replacement] babel-preset-react-hmre

props属性 { PropTypes }

state状态
可以在constructor中使用this.state直接定义它的值，使得渲染不同的UI，
也可以手动通过this.setState改变状态，从而重新调用render方法，渲染新的UI

ES6 class类型的component组件声明方式中，不会把一些自定义的callback方法绑定到实例上，所以需要手动在constructor中绑定：this.callback = this.callback.bind(this)

组件生命周期
getDefaultProps --> getInitialState -> componentWillMount -> render -> componentDidMount

组件props更新生命周期
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

组件卸载
componentWillUnmount

无状态函数式组件stateless functional component
没有state，只有props，则可以简化写成

function Component(props){
  return <div>{props.xxx}</div>
}

DOM操作
this.refs.name <- ref="xxx"属性

VirtualDOM
DOM结构的JS对象描述 = DOM + JS
https://github.com/Matt-Esch/virtual-dom

循环展示组件是，给每个子组件的key属性都赋值，目的是在重新渲染时，提高Diff算法的效率。

React测试

Mocha 很流行的前端测试框架，让异步测试变得简单。
http://mochajs.org

Chai 优秀的断言测试库。

React 官方测试库 react-addons-test-utils <-- Enzyme
Shallow Render 通过shallow()方法可以生成一个虚拟的DOM节点，然后可以通过find()方法测试属性值
https://github.com/airbnb/enzyme

安装：

npm i --save-dev ignore-styles mocha chai
npm i --save-dev react-addons-test-utils enzyme
mkdir test
touch Enzyme.test.js

package.json文件配置test脚本命令：
"test" : "NODE_ENV=production mocha --compliers js:babel-core/register --require ignore-styles"

使用：
test目录下创建文件Enzyme.test.js 然后运行npm test

import React from 'react';
import {expect} from 'chai';
import {shallow} from 'enzyme';
import List from '../app/components/List';
import ListItem from '../app/components/ListItem';

describe('Testing all the SFC using Enzyme', function(){
    const testData = [
    {
        "id": "dafksafksjfs23232",
        "title": "new item",
        "content": "hello item",
        "time": 1458030208359
    },
    {
        "id": "dsdsdsdad",
        "title": "new item2",
        "content": "# hello item2",
        "time": 1458030208359
    }
    ];

    it('test `List` component using Enzyme', ()=>{
        let list = shallow(<List items={testData} />);
        expect(list.find(ListItem).length).to.equal(testData.length);
    });

    it('test `ListItem` component using Enzyme', ()=>{
        let item = shallow(<ListItem item={testData[0]} />);
        expect(item.find('.item-title').text()).to.equal(testData[0].title);
        expect(item.find('.item-time').length).to.equal(1);
    })
});

Flux

Facebook官方推出的管理数据流、state、路由等的库，更像一种软件开发模式。
Action --> Dispatcher --> Store --> View

用户事件触发action--->到dispatcher--->数据存储中心store然后changed通过emit变换通知view改变状态从而达到刷新UI的流程。

Redux

提供了可预测的state管理，是跨平台的。
单一数据源、只读的state

action --> reducer --> store --- applyMiddleware