狗屎一樣的React（第四節，首頁banner圖輪播）
這一節，我們來看一個banner圖輪播，banner圖輪播是一個比較常用的需求，而且幾乎每個網站，每個app都會有一個banner圖輪播的效果，也不知道是誰創造出來的。
1、banner圖一般都是從檔案伺服器獲取的，也就是需要發請求獲取資料，需要發ajax請求，這裡我們需要使用jquery，當然，你也可以寫個原生的HTTPRequest那個原生寫法。
繼續開啟小黑窗，輸入npm install jquery --save-dev，
等下載成功後，看一眼“node_modules”資料夾下，是不是已經有“jquery”這個檔案夾了，如果有了那麼我們就可以在專案中使用jquery的相應功能了，如果還沒有說明沒有下載成功
2、我加上我寫的樣式，仍然是寫到demo.css中了
.banner{position:relative;}
ul{list-style:none;height:150px;overflow:hidden;width:100%;padding:0;margin:0;}
ul li{width:100%;height:150px;opacity:0;z-index:0;display:block;position:absolute;}
.li_show{
display:block;
animation:litoshow 2s 1;
animation-fill-mode: forwards;
-webkit-animation:litoshow 2s 1;
-webkit-animation-fill-mode: forwards;
}
@keyframes litoshow{
0% {display:none;}
100% {display:block;opacity:1;z-index:1;}
}
@-webkit-keyframes litoshow{
0% {display:none;}
100% {display:block;opacity:1;z-index:1;}
}
ul li img{width:100%;height:150px;}
.ban_btn{position:absolute;top:60px;width:100%;}
.ban_btn>div{width:35px;height:35px;background:#0863BC;border-radius:5px;text-align:center;line-height:35px;font-size:20px;color:#FFF;z-index:2;}
.ban_btn>div:nth-child(1){position:relative;}
.ban_btn>div:nth-child(2){float:right;position:relative;top:-36px;}
這裡面我們著重看li_show這個類，先記下來，後面會用到，這裡可以看出是給一個css類添加了css3 animation動畫即可
3、index.js中
引入我們第一步下載的jquery
程式碼：import $ from 'jquery';
4、首頁元件包裝，繼續修改index.js：
var SiteIndex = React.createClass({
render: function(){
return (
<div>
<AppTop word="首頁"/>
<BnanerSwipe />
</div>
);
}
});
AppTop我們認識，是上一節說過的頂部欄，現在多添加了一個BannaerSwipe元件
5、index.js中新增BannaerSwipe元件實現：
var BnanerSwipe = React.createClass({
getInitialState: function() {
return {
"bd": [],
"length": 0,
"index": 0
};
},
componentDidMount: function () {
$.post('http://www.xxx.com/prd/api/bannerPage', {},
function (data) {
this.setState({
bd: data["data"]["homeCarouselList"],
length: data["data"]["homeCarouselList"].length
});
}.bind(this));
},
prevImg: function(){
var index = this.state.index, l = this.state.length;
index--;
index = (index==-1) ? (l - 1) : index;
this.setState({"index":index}, () => this.state.index = index);
},
nextImg: function(){
var index = this.state.index, l = this.state.length;
index++;
index = (index==4) ? 0 : index;
this.setState({"index":index}, () => this.state.index = index);
},
render: function(){
var bannerImg = this.state.bd, index = this.state.index;
if(bannerImg.length == 0){
return false;
}
return (
<div className="banner">
<ul>
{bannerImg.map(function(v, k){
return (
<li key={k} className={index==k ? "li_show" : ""}>
<img src={v.imageUrl} />
</li>
);
})}
</ul>
<div className="ban_btn">
<div onClick={this.prevImg}>←</div>
<div onClick={this.nextImg}>→</div>
</div>
</div>
);
}
});
getInitialState這個方法是初始化定義元件中需要的一些配置變數，db是用來預備存放banner圖資料的，length用來預備存放banner圖的個數,index是用來標記當前banner圖顯示索引；
componentDidMount這個方法是準備資料的，裡面我們放了一個jquery的ajax用來請求資料，然後使用this.setState方法更改初始化的預存變數來為我們後續使用；
prevImg nextImg 這兩個事件後面可以找到呼叫事件的地方，就是onClick，這個沒有問題唄，但this.setState這個方法中，我們除了給元件的satate賦值，還添加了第二個函式 () => ，這個因為this.setState方法有非同步性，第一次賦值不能及時掛到元件的state上，需要添加個回撥函式，這樣我們set的屬性值就可以及時被我們使用啦；
render 這個方法中，bannerImg是我們請求到的圖片資料，通過map來遍歷顯示，看到map你能想到for迴圈就可以了，然後你去看一下es6的map方法的使用，react的map遍歷，你可以看見，我們給li加了key屬性，這個是必須要的，也沒什麼實際意義，就是為了區分每條資料，然後根據當前索引值來判斷給哪一個li新增li_show樣式，然後我們在第1條中說過li_show這個樣式，其實就是一個小的css3顯示效果，通過這樣一個過程達到banner圖迴圈顯示的效果。
其實我們這個外掛並非輪播，但現在網際網路上這種隱藏淡入的方式也挺流行的，所以我就順手做了一個淡入淡出的banner圖展示，你如果看明白了這個，輪播的效果幾乎也挺好實現的。
6、banner圖效果如圖：
因為請求的banner圖可能會有盜圖嫌疑，所以我塗鴉了，你能看清這是個banner圖就可以了，然後有左右兩個控制按鈕。
7、banner圖效果實現出來了，從這個簡單的例子其實我們就可以看出React元件的大概生命週期了，下一節我們通過這個例子說一下生命週期的問題，喜歡的小夥伴請關注下一節：狗屎一樣的React（第五節，React元件的生命週期）