应用程序等于用户界面加底层数据,一个有用的软件,它的本质是 数据处理
要探讨底层数据与UI的结合,开发一个完整的程序,还得应对很多数据结构,例如jSON对象,数组等,通过一个具体事例,看看在React框架下,数据是如何 与用户界面耦合起来的。
var destination = document.querySelector("#container");
var Circle = React.createClass({
render: function() {
var circleStyle = {
padding:10,
margin: 20,
display:"inline-block",
backgroundColor: this.props.bgColor,
borderRadius: "50%",
width: 100,
height: 100
};
return (
<div style={circleStyle}></div>
);
}
});
ReactDOM.render(
<div>
<Circle bgColor="#F9D240"/>
</div>,
destination
);
在代码中创建了一个Circle组件,它的作用就是在界面上绘制一个圆形。对代码做一点修改,实际上JSX标签代码,是可以当做一个变量来使用的,例:
var theCircle = <Circle bgColor="#F9D240"/>;
ReactDOM.render(
<div>
{theCircle}
</div>,
destination
);
代码更改后再重现加载,可以看到,程序运行的效果没有变化。这种把JSX代码段当做变量的做法,能给设计带来很大的灵活性
例如,想生成颜色随机变化的圆形,可以这么做
function showCircle() {
var colors ="#393E41","#E94F37","#1C89BF","#A1D363"];
var ran =Math.floor(Math.random()*colors.length);
return <Circle bgColor={colors[ran]}/>;
}
ReactDOM.render(
<div>
{showCircle()}
</div>,
destination
);
showCircle函数,首先是定义一个颜色数组,然后设定一个随机值,这个随机值用于随机的从数组中选取一个颜色,然后通过JSX构建一个Circle组件返回给调用者。运行上面代码后,应该会看到一个颜色跟原来不同的圆形。
更进一步,在界面上绘制多个颜色不同的圆形,那么可以这么做:
ReactDOM.render(
<div>
{showCircle()}
{showCircle()}
{showCircle()}
</div>,
destination
);
可以看到,有三个圆形被绘制到页面上了
上面的方式有个问题,就是我想画三个圆,我就得写三行代码:{showCircle()}, 如果我要画一百个,难道我要把这行代码重复一百遍不成?
一个解决办法是,通过循环生成多个Circle组件,把这些组件都存储在一个数组中,然后把组件数组提交给React框架,让他把数组中的组件都绘制到界面上。于是代码可以修改如下:
function showCircle() {
var colors = ["#393E41", "#E94F37","#1C89BF", "#A1D363", "#85FFC7","#297373", "#FF8552", "#A40E4C"];
var renderData = [];
for(var i = 0;i<colors.length;i++) {
var ran =Math.floor(Math.random()*colors.length);
renderData.push(<Circle key={i+colors[ran]} bgColor={colors[ran]}/>);
}
return renderData;
}
ReactDOM.render(
<div>
{showCircle()}
</div>,
destination
);
上面代码加载后,可以看到,在页面上有多个不同颜色的圆形被绘制出来,并且当再次刷新页面时,可以看到圆形的颜色会不断变化。有一点值得注意的是在Circle组件中增加了一个属性叫做 key, 如果没有这个属性,浏览器加载代码时会报错。如果动态生成多个组件时,一定要给每个组件添加一个key属性,这个属性必须是唯一的,因为React框架需要依赖这个属性来管理多个组件对象。
总结:
包含组件的JSX标签代码片段是可以当做一个独立变量的,这使得在代码中可以动态创建多个组件,存储在数组中,然后让React框架把他们逐个绘制出来。特别需要注意的是,当生成多个组件时,必须在jSX中给组件对象增加一个key属性,这个属性必须是唯一的,因为React框架需要根据这个属性来管理各个组件。