基于React实现项目中状态型变量的数据驱动可视化

经历了一段时间无代码的日子后，最近几天又开始着手于写代码了。上午出去看了超俪的《恶棍天使》，虽然说也笑了很多，但是还是觉得很多地方纯粹就是为了笑而制造笑点，电影本可以传递友情啊亲情啊什么的，但是最后却定格在了喜剧上，可圈可点。

言归正传。最近在做实验室项目的时候一直希望摆脱原来的思维方式进而让自己可以获得进步，所以在做一些新的方面的思考与尝试，在原来项目中的状态型变量可视化上代码和逻辑可以说是具有相当的复杂度，而且可复用性是相当的差，今天下午针对同样的需求，基于最近一直学习的React构建，谈不上也多么的好，同样逻辑也是非常的复杂，但是感觉这种复杂是有一条内在线贯穿的复杂，很是便于理解，而且组件化的构建也具有更好的复用性，一个明显的好处就是只用了150行代码就实现了,同时布局采用flexbox，真的是省了很多事。细节不描述，先上结果再上代码。



其中代表左右方向的两个箭头都是可以点击操作，然后更新数据后触发页面的重新渲染，当然具体渲染机制都是React内部做了很好的优化。代码如下，不解释：

//系统组件，如水箱，压力表，水泵
var SystemComponent = React.createClass({
render:function(){
var stateValue = this.props.exState;
var clsname;//根据不同的状态值拼接不同的类名
if(stateValue == '0'){
clsname = 'systemStyle';
}else if(stateValue == '1'){
clsname = 'systemStyle systemExcept';
}
var clsn = "systemIcon "+this.props.ename;
return (
<div className={clsname}>
<span className={clsn}></span>
<span className="systemName">{this.props.name}</span>
</div>
);
}
});

//巡检时间组件
var TimeComponent = React.createClass({
render:function(){
var timeValue = this.props.xtime;
return (
<div className="timePart">{timeValue}</div>
);
}
});

//三个系统加时间组合在一起
var SystemComGroup = React.createClass({
render:function(){
var timeValue = this.props.etime,
stateValue = this.props.exState,
allStateValue = this.props.allStateFlag;
var sysName = [{'sx':'水箱'},{'sb':'水泵'},{'ylb':'压力表'}];
var arr = [];
sysName.map(function(item,index){
for(var key in item){
arr.push(<SystemComponent name={item[key]} ename={key} exState={stateValue[index]}/>);
}
});
var clsName;
if(allStateValue){
clsName = 'systemGroup systemGroupException';
}else{
clsName = 'systemGroup';
}
return (
<div className={clsName}>
{arr}
<TimeComponent xtime={timeValue}/>
</div>
);
}
});

//左移
var LeftMove = React.createClass({
clickHandler:function(){
this.props.onClickEvent();
},
render:function(){
return (
<div className="moveStyle" onClick={this.clickHandler}>{'<'}</div>
)
}
});

//右移
var RightMove = React.createClass({
clickHandler:function(){
this.props.onClickEvent();
},
render:function(){
return (
<div className="moveStyle" onClick={this.clickHandler}>{'>'}</div>
)
}
});

//三个SystemComGroup组合在一起
var SystemDisplay = React.createClass({
render:function(){
var data = this.props.accessData;
var timeValue,stateValue;
var buildingName = this.props.buildName;
var arr = [];
data.map(function(item){
timeValue = item['time'];
stateValue = item['state'];
var allStateKey = false;
stateValue.map(function(item){
if(item == '1'){
allStateKey = true;
}
});
arr.push(<SystemComGroup etime={timeValue} exState={stateValue} allStateFlag={allStateKey}/>);
});
return (
<div className="buildingContent">
<div className="buildingDiv">{buildingName}</div>
<LeftMove onClickEvent={this.props.onDataChange}/>
{arr}
<RightMove onClickEvent={this.props.onDataChange}/>
</div>
);
}
});

//建筑
var Building = React.createClass({
getInitialState:function(){
var now = new Date();
var res = [
{'time':now.getFullYear()+'年'+(now.getMonth()+1)+'月'+(now.getDate()-1)+'日'+now.getHours()+'时'+now.getMinutes()+'分'+now.getSeconds()+'秒','state':[Math.round(Math.random()),Math.round(Math.random()),Math.round(Math.random())]},
{'time':now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日'+now.getHours()+'时'+now.getMinutes()+'分'+now.getSeconds()+'秒','state':[Math.round(Math.random()),Math.round(Math.random()),Math.round(Math.random())]},
{'time':now.getFullYear()+'年'+(now.getMonth()+1)+'月'+(now.getDate()+1)+'日'+now.getHours()+'时'+now.getMinutes()+'分'+now.getSeconds()+'秒','state':[Math.round(Math.random()),Math.round(Math.random()),Math.round(Math.random())]}
];
return {
dataValue:res
};
},
dataChangeHandler:function(){
var now = new Date();
var res = [
{'time':now.getFullYear()+'年'+(now.getMonth()+1)+'月'+(now.getDate()-1)+'日'+now.getHours()+'时'+now.getMinutes()+'分'+now.getSeconds()+'秒','state':[Math.round(Math.random()),Math.round(Math.random()),Math.round(Math.random())]},
{'time':now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日'+now.getHours()+'时'+now.getMinutes()+'分'+now.getSeconds()+'秒','state':[Math.round(Math.random()),Math.round(Math.random()),Math.round(Math.random())]},
{'time':now.getFullYear()+'年'+(now.getMonth()+1)+'月'+(now.getDate()+1)+'日'+now.getHours()+'时'+now.getMinutes()+'分'+now.getSeconds()+'秒','state':[Math.round(Math.random()),Math.round(Math.random()),Math.round(Math.random())]}
];
this.setState({dataValue:res});
},
render:function(){
var build = ['A区主教','A区五教','A区八教','A区综合楼'];
var arr = [];
var _this = this;
build.map(function(item){
arr.push(<SystemDisplay buildName={item} accessData={_this.state.dataValue} onDataChange={_this.dataChangeHandler}/>);
});
return (
<div>{arr}</div>
);
}
});
React.render(<Building />,document.getElementById("systemContainer"));

OK，到此结束，懒得写注释了，最后那段有点乱是因为根据当前时间产生数据，拼接的有点乱。本文真的是原创的，如果真的有人要转载的话，请注明出处，因为水平有限，有错误的话还得随时改正。