redux-simple 简化版的redux

　　作为react的粉丝，当然要吐槽一下react组件通信问题。react的单向数据流是组件通信的一大阻碍，只允许父组件向子组件传值，子组件向父组件传值只能通过父组件向子组件传递回调函数实现。如果在深层次的组件结构当中，复杂与繁多的回调会大大增加程序的维护难度与可读性，延长开发周期。即使react实现的再优秀，组件通信没处理好，还是一坨屎。redux给react的组件通信带来解决方案：构建一个大的状态作用域（一个大组件），大组件里的所有组件状态变化都只需要维护大组件，更新的状态都有大组件开始下发，这样就避免了子组件向父组件传值需要回调方法的问题。

redux优点:贯彻了react的单向数据流思想，避免父子组件通信时繁琐的回调，清晰的数据流简化了业务逻辑实现，提高应用维护效率。

redux槽点：为了数据中心化与自动化测试分离出了action与redcuer与mapStateToProps,简单的数据操作被复杂化了。每次dispatch都会重新渲染状态作用域里的所有组件，虽然react使用diff算法筛选出需要改变的节点进行渲染（优化了性能），但是在庞大以及深层次的组件结构中，diff带来的消耗还是不可忽视的。

　　我格外厌恶redux繁琐的操作，所以自己实现了一个简化版的redux。把action与redcuer合并、废弃了mapStateToProps简化了redux的数据操作。由于action与redcuer的合并后存在数据依赖，所以合并后的action不能做数据自动化测试。除了简化redux的繁琐的数据操作之外，还通过监听组件里的动态数据与dispatch更新的数据对比检测该组件是否需要重新渲染，解决redux最大的弊端【redux组件渲染弊端：redux dispatch后没有变化的组件也会被重新渲染，这是不必要的性能消耗】。我还丰富了Component基类给每个组件提供了重新渲染检测功能。

redux-simple.s实现如下:

 import React,{Component,createElement} from "react";
 var event=function(){
     var propsment={};
     var dispatchProps={};
     return {
         //添加监听属性
         listenProps:function(props,_this){
                          if(_this.constructor&&_this.constructor.name){
                 propsment[_this.constructor.name]=props;
             }else{
                 throw new Error("监听对象不是react组件");
             }
         },
         //清空监听的属性
         emptyProps:function(){
             propsment={};
         },
         //检测是否需要更新
         checkProps:function(_this){
             var data=propsment[_this._reactInternalInstance.getName()]||[];
             var propKeys=Object.keys(dispatchProps);
             //没有监听属性的组件直接更新
             if(!data.length){
                 return true;
             }
             for(var i=0;i<data.length;i++){
                 //判断监听的属性是否存在于更新数据里面，存在则更新组件
                 if(propKeys.indexOf(data[i])!=-1){
                     return true;
                 }
             }
             return false;
         },
         //监听更新的数据
         listenDispatch:function(props){
             dispatchProps=props;
         }
     }

 }()
 export function connect(App,actions){
     let dispatch,getState;
     dispatch=getState=function(){
         throw new Error("组件还没初始化");
     }
     class Main extends Component{
         constructor(props){
             super(props);
             this.constructor.setState=dispatch=(data)=>{
                 //监听更新的数据
                 event.listenDispatch(data);
                 //更新store
                 this.setState(Object.assign({},this.state,data));
             }
             getState=()=>{
                 return Object.assign({},this.state);
             }
             this.actions=bindAction(actions,dispatch,getState||{});
         }
         render(){
             return <div>
                 {createElement(App,Object.assign({dispatch:dispatch,listenProps:event.listenProps,getState:getState,actions:this.actions},this.props,this.state))}
             </div>
         }
     }
 return Main;
 }
 //action方法绑定dispatch并支持异步
 function bindActionCreators(action,dispatch,getState){
     if(typeof action==="function"){
         return function(){
             [].unshift.call(arguments,getState());
             var newState=action.apply(null,arguments);
             if(typeof newState==="function"){
                 newState(dispatch)
             }else if(isObject(newState)){
                 dispatch(newState);
             }else{
                 throw new Error("action方法返回值只能是函数或者对象");
             }
         }
     }
 }
 //给所有的action方法绑定dispatch
 export function bindAction(actions,dispatch,getState){
     var newActions={};
     if(isObject(actions)){
         var keys=Object.keys(actions);
         keys.forEach(function(value){
             newActions[value]=bindActionCreators(actions[value],dispatch,getState)
         })
         return newActions;
     }else if(actions){
         throw new Error("actions必须是对象")
     }
 }
 //检测是否是一个对象
 let isObject=(data)=>{
     if(Object.prototype.toString.call(data)=="[object Object]"){
         return true;
     }else{
         return false;
     }
 }
 //构建新的组件基类
 export default class NewCom extends Component{
     shouldComponentUpdate(nextProps){
         return event.checkProps(this,nextProps);  //检测是否重新渲染该组件
     }
     componentWillUnmount(){
         event.emptyrProps(); //清空监听列表
     }
 }

使用实例如下：

　　

 import ReactDom from "react-dom";
 import React from "react";
 import Component,{connect} from "./react-extend.js";
 import * as actions from "./action/test.js";
 class Test01 extends Component{
     constructor(props){
         super(props);
         this.props.listenProps(["test01"],this); //监听该组件的动态数据
     }
     render(){
         return <h1>{this.props.test01}</h1>
     }
 }
 class Test02 extends Component{
     constructor(props){
         super(props);
         this.props.listenProps(["test02"],this);  //监听该组件的动态数据
     }
     clickHandler(){
         this.props.actions.changeTest01(789);
     }
     render(){
         return <h1 onClick={this.clickHandler.bind(this)}>{this.props.test02}</h1>
     }
 }
 class Main extends Component{
     componentDidMount(){
         this.props.actions.init({
             test01:123,
             test02:456,
         })
     }
     render(){
         return <div>
             <Test01 {...this.props}/>
             <Test02 {...this.props}/>
         </div>
     }
 }
 var NewMain=connect(Main,actions);
 ReactDom.render(
     <NewMain />,
     document.getElementById("container")
 )

action:

 export function changeTest01(state,value){
     return {
         test01:value,
     }
 }
 export function init(state,obj){
     return obj;
 }