react ～router && Redux && react-saga && mobx-白红宇

最近看啦react路由的各种实现，原先不止如何入手写这片文章，现在想将他们对比来写更好理解一点，也方便大家如何选择适合自己的方式,最后会结合express && jwt && mongledb 写一个简单应用，文章比较长，请大家耐心看 ``

react-router

Prompt 跳转弹框

withRouter 将非路由渲染组件，变成路由渲染组件

render 匹配渲染

children 无论匹配与否都渲染

参考

组件复用两大策略

高阶组件

函数组委子组件

Redux

随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难,Redux的出现就是为了解决state里的数据问题,在React中，数据在组件中是单向流动的,数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（或者称作兄弟组件）之间的通信就比较麻烦

Redux设计思想

Redux是将整个应用状态存储到到一个地方，称为store

里面保存一棵状态树(state tree)

组件可以派发(dispatch)行为(action)给store,而不是直接通- 知其它组件

其它组件可以通过订阅store中的状态(state)来刷新自己的视图.

redux-router是接受store的组件，通过context api传递给所有子组件,优点类似于路由，将store和dispatch分别映射成props属性对象，返回组件

Redux-thunk Redux-logger Redux-promise 都属于Redux的中间件redux中的compose将其整合,这三者原理如下 store/index.js thunk

thunk1(payload) {		/**		 * 把这个函数发给仓库的时候		 * 1. 需要帮我执行这个函数		 * 2. 需要传递进来dispatch和getState方法		 */		return  function (dispatch,getState) {			setTimeout(() => {				dispatch({
   type: ADD1,payload});			},1000);		}	},		function thunk1({dispatch,getState}) {	return function (next) {		return function (action) {			//如果发过来的action是一个函数，则让他执行			if (typeof action == 'function') {				action(dispatch,getState);	        //如果说不是一个函数，那么直接传给老的store.dispatch						} else {				next(action);			}		}	}}复制代码

promise

promise1(payload) {		//返回一个promise 		return new Promise(function(resolve,reject){			setTimeout(()=> {				resolve({
   type: ADD1,payload});			},1000);		});	},	function promise1({dispatch,getState}) {	return function (next) {		return function (action) {			if (action.then && typeof action.then == 'function') {				action.then(dispatch);			} else if (action.payload&& action.payload.then && typeof action.payload.then == 'function') {				action.payload.then(payload => {					dispatch({...action,payload});				},payload => {					dispatch({...action,payload});				});			} else {				next(action);			}		}	}}复制代码

payloadPromise

payloadPromise1(payload) {		return {			type: ADD1,			payload:new Promise(function(resolve,reject){				setTimeout(()=> {					if (Math.random()>.5) {						resolve(payload);					} else {						reject(-payload);					}				},1000);			})		}	}复制代码

重点

let store=createStore(reducers,{},applyMiddleware(promise,thunk,logger));//let store=applyMiddleware(promise,thunk,logger)(createStore)(reducers);复制代码

Redux-saga imuuntable dva

Redux-saga是redux的中间件，作用是提供redux的额外功能，reducer的操作都是同步的并且纯粹的，reducer都是纯函数，返回的结果直依赖于他的参数，并且产生的结果不会产生副作用，但在世纪开发过程中我们处理异步请求，这些不纯粹的操作（比如改变外部状态），在函数编程式被成为副作用，他是一个接手事件，并可能触发新事件的管理者，为你的应用管理复杂的流程。

imuuntable

imuuntable是个类库，Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗。

imuutabel主要用于优化，如果state没有变化就不进新房刷新，那怎么做到的呢？主要是用啦PureComponent，PureComponent的实现原理其实是shouldComponentUpdate函数，因为setState内部实现也是靠shouldComponentUpdate(newState)来决定是否渲染

mobx

状态变化引起的副作用应该被自动触发

应用逻辑只需要修改状态数据即可,mobx回自动渲染UI，无需人工干预

数据变化只会渲染对应的组件

MobX提供机制来存储和更新应用状态供 React 使用

eact 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染