使用react写的第一个轮播图组件

本次的博客完整的代码不会贴出，主要是讲写代码过程中的问题和解决方法

废话：同理为了写代码更快速，我使用了webpack进行管理，这里的webpack是使用了我上一篇博客自己写的，同时加上加载所需要的loader就可以使用了，如react-loader,less-loader

开始

　　我承认，我参考了别人的代码，链接：http://www.tuicool.com/articles/FZVfAj
　　他主要给了我整体的思路，和组建件值和函数的传递关系，还有轮播的主要的“算法”，当然我也是有自己的思考的好吗，接下来就是我思考的方向，你可以参考上面链接的代码，当然我是更希望你先读懂上面那位仁兄的思路，再看我的，毕竟我是觉得我的是有改进的，也更合理，链接：react-slide

（以上为另一段废话，废话就这么多吧）

改进1：自动引入图片信息
使用服务端的fs模块进行读取Image文件内的图片信息，并写入一个Image.json文件中，避免修改源代码文件，这里使用了部分的es6规范和特性，如promise和generator，代码：

"use strict";let Promise = require("bluebird");  //bluebird 的promise模块let fs = Promise.promisifyAll(require("fs"));   //把nodejs原生的fs模块进行promise封装let readImage = Promise.coroutine(function *(path) {    let fileHandler = yield fs.readdirAsync(path);    let list = yield Promise.map(fileHandler, (file) => {        return {            src: path.concat("/", file),            alt: file        }    });    return list;});readImage('./image').then((list) => {    fs.writeFileAsync('Image.json', JSON.stringify(list), {flag: "w+"});}).catch((err) => {    console.log(err.stack);});

ps：（这里需要注意，使用引入json文件和引入less文件同理，都需要加载loader，这里是json-loader）

改进2：轮播图循环播放
和以往写轮播图一般，需要把轮播图的第一张图和最后一张图无缝接入，在使用react写时，这也是需要实现的，实现思路这里也简略说以下，因为有js基础的人基本都会

思路：需要在最后的一张图片后面加上第一张图，如现在有的图片数组时：[img0,1img,img2]，改为[img0,1img,img2,img0]，让img2过度到下标为3的img0，然后用react的setstate方法，迅速切换到下标为0的img0，这时就好像轮播图在循环播放，当然切换时需要把动画效果取消，具体的可以看下列代码与前面提到的仁兄的做个对比：

//我的...this.count = Images.length + 1;...if(_n == this.count){   this.transition = "none";}else{    this.transition = "all 0.8s linear";}if(_n < 0){    _n = _n + this.count;}if(_n >= this.count){    _n = _n - this.count;}this.setState({curIndex: _n});//别人的if(_n < 0) {  _n = _n + this.props.items.length;}if(_n >= this.props.items.length) {  _n = _n - this.props.items.length;}this.setState({nowLocal: _n});

改进3：使用cdn加速加载react和react-dom
由于一开始使用本地下载的react和react-dom依赖后发现发布后的文件太大了，有160KB，这是因为本身react和react-dom的文件太大了，所以后期使用了cdn加速服务的react和react-dom，虽然大小并没有多大改变，但可以有效避免以后的重复请求，也可以加快请求速度

以下是做法：

<!--index.html在主js文件前加载react和react-dom--><script src="http://cdn.cdnjs.net/react/15.4.0-rc.3/react.min.js"></script><script src="http://cdn.cdnjs.net/react/15.4.0-rc.3/react-dom.min.js"></script><script type="text/javascript" src="./assets/app.js"></script>

//先把cdn上的两个文件导出为模块//新建文件loadReact.jsmodule.exports = window.React;//新建文件loadReactDom.jsmodule.exports = window.ReactDOM;

//webpack配置外部的包，且不需要进行打包操作alias: {    "React": "../src/common/loadReact.js",    "ReactDom": "../src/common/loadReactDom.js",},externals: {        "react2": 'React',        'react-dom2': 'ReactDOM'},

//index.js//使用cdn的react和react-dom//后面的使用和本地安装的react和react-dom模块相同const ReactDom = require("react-dom2");const React = require("react2");

最后再给出源代码地址：react-slide