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
}