标签：
作为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实现如下:
1 import React,{Component,createElement} from "react"; 2 var event=function(){ 3 var propsment={}; 4 var dispatchProps={}; 5 return { 6 //添加监听属性 7 listenProps:function(props,_this){ 8 9 if(_this.constructor&&_this.constructor.name){ 10 propsment[_this.constructor.name]=props; 11 }else{ 12 throw new Error("监听对象不是react组件"); 13 } 14 }, 15 //清空监听的属性 16 emptyProps:function(){ 17 propsment={}; 18 }, 19 //检测是否需要更新 20 checkProps:function(_this){ 21 var data=propsment[_this._reactInternalInstance.getName()]||[]; 22 var propKeys=Object.keys(dispatchProps); 23 //没有监听属性的组件直接更新 24 if(!data.length){ 25 return true; 26 } 27 for(var i=0;i<data.length;i++){ 28 //判断监听的属性是否存在于更新数据里面，存在则更新组件 29 if(propKeys.indexOf(data[i])!=-1){ 30 return true; 31 } 32 } 33 return false; 34 }, 35 //监听更新的数据 36 listenDispatch:function(props){ 37 dispatchProps=props; 38 } 39 } 40 41 42 }() 43 export function connect(App,actions){ 44 let dispatch,getState; 45 dispatch=getState=function(){ 46 throw new Error("组件还没初始化"); 47 } 48 class Main extends Component{ 49 constructor(props){ 50 super(props); 51 this.constructor.setState=dispatch=(data)=>{ 52 //监听更新的数据 53 event.listenDispatch(data); 54 //更新store 55 this.setState(Object.assign({},this.state,data)); 56 } 57 getState=()=>{ 58 return Object.assign({},this.state); 59 } 60 this.actions=bindAction(actions,dispatch,getState||{}); 61 } 62 render(){ 63 return <div> 64 {createElement(App,Object.assign({dispatch:dispatch,listenProps:event.listenProps,getState:getState,actions:this.actions},this.props,this.state))} 65 </div> 66 } 67 } 68 return Main; 69 } 70 //action方法绑定dispatch并支持异步 71 function bindActionCreators(action,dispatch,getState){ 72 if(typeof action==="function"){ 73 return function(){ 74 [].unshift.call(arguments,getState()); 75 var newState=action.apply(null,arguments); 76 if(typeof newState==="function"){ 77 newState(dispatch) 78 }else if(isObject(newState)){ 79 dispatch(newState); 80 }else{ 81 throw new Error("action方法返回值只能是函数或者对象"); 82 } 83 } 84 } 85 } 86 //给所有的action方法绑定dispatch 87 export function bindAction(actions,dispatch,getState){ 88 var newActions={}; 89 if(isObject(actions)){ 90 var keys=Object.keys(actions); 91 keys.forEach(function(value){ 92 newActions[value]=bindActionCreators(actions[value],dispatch,getState) 93 }) 94 return newActions; 95 }else if(actions){ 96 throw new Error("actions必须是对象") 97 } 98 } 99 //检测是否是一个对象 100 let isObject=(data)=>{ 101 if(Object.prototype.toString.call(data)=="[object Object]"){ 102 return true; 103 }else{ 104 return false; 105 } 106 } 107 //构建新的组件基类 108 export default class NewCom extends Component{ 109 shouldComponentUpdate(nextProps){
110 return event.checkProps(this,nextProps); //检测是否重新渲染该组件 111 } 112 componentWillUnmount(){ 113 event.emptyrProps(); //清空监听列表 114 } 115 }
使用实例如下：
1 import React from "react"; 2 import ReactDOM from "react-dom"; 3 import Component,{connect} from "./react-simple.js"; 4 class Test01 extends Component{ 5 constructor(props){ 6 super(props); 7 this.props.listenProps(["test01"],this) 8 } 9 render() { 10 console.log(this.props.test01); 11 return <h1>{this.props.test01}</h1>; 12 } 13 } 14 class Test02 extends Component{ 15 constructor(props){ 16 super(props); 17 this.props.listenProps(["test02"],this) 18 } 19 clickHandler(){ 20 this.props.dispatch({ 21 test01:789, 22 }) 23 } 24 render() { 25 console.log(this.props.test02); 26 return <h1 onClick={this.clickHandler.bind(this)}>{this.props.test02}</h1>; 27 } 28 } 29 class Main extends Component{ 30 componentDidMount(){ 31 this.props.dispatch({ 32 test01:123, 33 test02:456, 34 }) 35 } 36 render() { 37 return <div> 38 <Test01 {...this.props}/> 39 <Test02 {...this.props} /> 40 </div>; 41 } 42 } 43 var NewCom=connect(Main); 44 ReactDOM.render( 45 <NewCom />, 46 document.getElementById("container") 47 )
标签：
原文地址：http://www.cnblogs.com/dudeyouth/p/5668706.html
