Reactjs + Redux
Reactjs
demo: https://github.com/saoraozhe3hao/reactDemo
react
React为此引入了虚拟DOM（Virtual DOM）的机制：
在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，
然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新
而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并
Virtual DOM ：维护在内存的类似于DOM树的JavaScript对象树，对变化批量更新至Web DOM树.虚拟DOM的节点记录了元素名称，属性名称和值
组件间的通信，父组件引用子组件，子组件回调父组件，EventEmitter(npm events 包)
在componentDidMount 里面可以元素 和 body、window 绑定原生事件,在componentWillUnmount里解除
JSX 转 JS
运行时转换： <script src="reactjs/JSXTransformer.js"></script>
打包时转换：
安装命令行工具 npm install -g react-tools
转换：jsx --watch jsx/ js/
Redux
Demo: https://github.com/saoraozhe3hao/reduxDemo
Flux
Flux是Facebook提出的一种 前端应用架构体系，其中 react 作为它的View层。
Redux
Redux 是 Flux 体系的一个实现框架
Redux实现单项数据流
import { createStore } from 'redux' // Redux 的API ：createStore
import reducer from './reducer' // reducer需要自己实现，输入 state 和 action，返回新的state
const store = createStore(reducer) // 全局只创建一个 store，用于存放数据。可加第二个参数，作为store初始数据
<label>{store.getState().label}</label> // store的API：getState，获取store快照
<button onClick={() => store.dispatch({ type: 'CLICK_BUTTON' }}> // store的API：dispatch，在事件处理函数中分发action
store.subscribe(render) // store的API：subscribe，store变化时启动
事件 -> store.dispatch(action)[调用reducer，更新store] -> 触发store.subscribe注册的render或setState -> store.getState得到新的state
Redux 的API：combineReducers，用于对reducer的拆分
react-redux
import { Provider, connect } from 'react-redux' // react-redux 的 API：Provider、connect
const App = connect(
mapStateToProps, // function(state){return props}, 用于设置 UI组件的 props
mapDispatchToProps // function(dispatch){return {functions}} 用于给 UI组件的props 添加 事件处理函数，事件处理函数中调用 dispatch
)(UI 组件) // 返回一个容器组件
ReactDOM.render(
<Provider store={store}>
<App /> // 使用容器组件
</Provider>,
document.getElementById('root')
)
react-router-redux
import {browserHistory} from 'react-router'
import {createRouterMiddleware,synHistoryWithStore,push} from 'react-router-redux'
const store = createStore(
reducers,
applyMiddleware(createRouterMiddleware(browserHistory)) // 路由中间件
)
<Router history={synHistoryWithStore(browserHistory,store)}></Router> // 增强的history
store.dispatch(push('/home')) //路由操作
中间件（middleware）redux-saga 改造store.dispatch实现异步分发action
import createSagaMiddleware from 'redux-saga' // redux-saga 的API：createSagaMiddleware
const sagaMiddleware = createSagaMiddleware() // 生成中间件
const store = createStore(
reducer,
Redux.applyMiddleware(sagaMiddleware) // Redux 的API：applyMiddleware，应用中间件
);
sagaMiddleware.run(saga) // saga 是一个Generator函数，含有action和处理函数的对应关系
saga
import { call, all,take, put,takeEvery } from 'redux-saga/effects'
export default function* saga() {
yield takeEvery('ACTION_TYPE', gen) // takeEvery 相当于 while(true){take}，等待一个action,去执行gen
}
function* gen(){
var result = yield fetch(url); // fetch返回一个promise，该Generator函数调用者执行promise.then(function(data){g.next(data);})，g为gen返回的遍历器
console.log(result); // g.next后才会执行到这里，result被替代为g.next传进来的data
}