這一節(jié)，我們來看一個banner圖輪播，banner圖輪播是一個比較常用的需求，而且?guī)缀趺總€網(wǎng)站，每個app都會有一個banner圖輪播的效果，也不知道是誰創(chuàng)造出來的。
1、banner圖一般都是從文件服務(wù)器獲取的，也就是需要發(fā)請求獲取數(shù)據(jù)，需要發(fā)ajax請求，這里我們需要使用jquery，當然，你也可以寫個原生的HTTPRequest那個原生寫法。
繼續(xù)打開小黑窗，輸入npm install jquery --save-dev，
等下載成功后，看一眼“node_modules”文件夾下，是不是已經(jīng)有“jquery”這個文件夾了，如果有了那么我們就可以在項目中使用jquery的相應(yīng)功能了，如果還沒有說明沒有下載成功
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、首頁組件包裝，繼續(xù)修改index.js：
var SiteIndex = React.createClass({
render: function(){
return (
);
}
});
AppTop我們認識，是上一節(jié)說過的頂部欄，現(xiàn)在多添加了一個BannaerSwipe組件
5、index.js中添加BannaerSwipe組件實現(xiàn)：
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"》《/div》
《ul》
{bannerImg.map(function(v, k){
return (
《li key={k} className={index==k ? "li_show" : ""}》
《img src={v.imageUrl}/》
《/li》
);
})}
《div className="ban_btn"》
《div onClick={this.prevImg}》←《/div》
《div onClick={this.nextImg}》→《/div》
《/div》
《/div》
);
}
});
注意：因為這里不讓輸入html標簽，所以我把標簽都改成《》了，小伙伴們用的時候改成html標簽即可
getInitialState這個方法是初始化定義組件中需要的一些配置變量，db是用來預(yù)備存放banner圖數(shù)據(jù)的，length用來預(yù)備存放banner圖的個數(shù),index是用來標記當前banner圖顯示索引；
componentDidMount這個方法是準備數(shù)據(jù)的，里面我們放了一個jquery的ajax用來請求數(shù)據(jù)，然后使用this.setState方法更改初始化的預(yù)存變量來為我們后續(xù)使用；
prevImgnextImg這兩個事件后面可以找到調(diào)用事件的地方，就是onClick，這個沒有問題唄，但this.setState這個方法中，我們除了給組件的satate賦值，還添加了第二個函數(shù) () => ，這個因為this.setState方法有異步性，第一次賦值不能及時掛到組件的state上，需要添加個回調(diào)函數(shù)，這樣我們set的屬性值就可以及時被我們使用啦；
render這個方法中，bannerImg是我們請求到的圖片數(shù)據(jù)，通過map來遍歷顯示，看到map你能想到for循環(huán)就可以了，然后你去看一下es6的map方法的使用，react的map遍歷，你可以看見，我們給li加了key屬性，這個是必須要的，也沒什么實際意義，就是為了區(qū)分每條數(shù)據(jù)，然后根據(jù)當前索引值來判斷給哪一個li添加li_show樣式，然后我們在第1條中說過li_show這個樣式，其實就是一個小的css3顯示效果，通過這樣一個過程達到banner圖循環(huán)顯示的效果。
其實我們這個插件并非輪播，但現(xiàn)在互聯(lián)網(wǎng)上這種隱藏淡入的方式也挺流行的，所以我就順手做了一個淡入淡出的banner圖展示，你如果看明白了這個，輪播的效果幾乎也挺好實現(xiàn)的。
6、banner圖效果如圖：
因為請求的banner圖可能會有盜圖嫌疑，所以我涂鴉了，你能看清這是個banner圖就可以了，然后有左右兩個控制按鈕。
7、banner圖效果實現(xiàn)出來了，從這個簡單的例子其實我們就可以看出React組件的大概生命周期了，下一節(jié)我們通過這個例子說一下生命周期的問題，喜歡的小伙伴請關(guān)注下一節(jié)：狗屎一樣的React（第五節(jié)，React組件的生命周期）
