前端框架Reactjs

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(

<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

}

Reactjs + Redux

相关推荐