數據邏輯與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框架需要根據這個屬性來管理各個組件。