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 //组件打包工具
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
网友评论