数据逻辑与UI的结合

应用程序等于用户界面加底层数据，一个有用的软件，它的本质是 数据处理

要探讨底层数据与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框架需要根据这个属性来管理各个组件。