狗屎一樣的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方法更改初始化的預存變量來為我們後續使用；

prevImgnextImg這兩個事件後面可以找到調用事件的地方，就是onClick，這個沒有問題唄，但this.setState這個方法中，我們除了給組件的state賦值，還添加了第二個函數 () => ，這是因為this.setState方法有異步性，第一次賦值不能成功，需要添加回調函數，這個回調函數可以同步賦值

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組件的生命週期）