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

时间：2022-12-09 09:23:29

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

废话：同理为了写代码更快速，我使用了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.js
module.exports = window.React;
//新建文件loadReactDom.js
module.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

标签：

相关文章