React封装轮播图组件 超详细文字说明+源码

react轮播图组件封装

开篇先唠唠嗑：

作者最近也是在学习react，到今天为止正好半个月，15天。最近了解到了蚂蚁的Ant-Design UI库，于是想我也想利用之前所学的东西试着去封装一个自己的组件。当初学原生的DOM操作时，轮播图算是一个比较经典的案例了。我看一些面经上也有相关的问题，所以打算封装一个轮播图组件作为自己封装的第一个react组件。

第一次独立上手封装react组件真是不习惯，刚开始毫无思绪，连jsx语法都生疏了，通过借鉴以前用原生js写轮播图的思路，经过大半天，还是慢慢写出来了。下面开始正题：

几个重要的点：

• 如何应用react的思想
• 轮播的原理
• 节流阀的运用
• 如何组织组件的API

整体实现思路（应用react思想）：

与原生的JavaScript命令式的直接操作DOM不同，react是采用声明式的模式通过虚拟DOM来操作原生的DOM。所以，我们应该主要聚焦的是如何通过render函数和setState方法来渲染state中的数据，从而实现轮播图效果。

我们知道，轮播图实现的原理，是在子绝父相的布局下，不断改变图片的left属性。

首先观察静态的html与css代码：

<div class="focus">
      <ul class="img">
        <li>
          <a href="#"><img src="focus.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="focus1.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="focus2.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="focus3.jpg" alt="" /></a>
        </li>
      </ul>
      
      <!--图片控制按钮 -->
      <ul class="pointer">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	  </ul>
    </div>

采用ul结构来保存图片，ul在属性名为focus的盒子的包裹下。所以只要将focus盒子设为相对定位，ul设置为绝对定位，通过不断改变ul的left属性值，即可实现轮播。
注意：为了能够实现连续的轮播效果，如果想要轮播四张图片，必须得在图片列表末尾再拷贝第一张图片，同理也必须在图片列表开头拷贝最后一张图片。具体原理后续会详细说明。

css代码：

li {
   
  list-style: none;
}

* {
   
  margin: 0;
  padding: 0;
}

.focus {
   
  position: relative;
  width: 720px;
  height: 455px;
  overflow: hidden;
  margin: 100px auto;
}

.img {
   
  width: 600%;/* 拷贝之后图片列表中有6张图片，将ul的宽设置为600%，从而使所有图片都在同一行上*/
  position: absolute;
  z-index: -1;
}

.img li {
   
  float: left;
  width: 720px;
  height: 455px;
}

.pointer {
   
  position: absolute;
  bottom: 12px;
  left: 320px;
}

.pointer li {
   
  cursor: pointer;
  display: inline-block;
  margin-right: 5px;
  width: 18px;
  height: 18px;
  background-color: white;
  opacity: 0.3;
  border-radius: 50%;
}

.current {
   
  opacity: 1 !important;
}

实现效果：（以四张图片