【前端】 react项目使用bootstrap、useRef和useState之间的区别和应用，自动轮播图的实现

一、场景描述

我想写一个轮播图的程序，只是把bootstrap里面的轮播图拉过来就用上感觉不是很合适，然后我就想自己写自动轮播，因此，这篇文章里面只是自动轮播的部分，没有按键跟自动轮播的衔接部分。
Ps: 本文用的是函数式组件，因为新版本的react函数式组件用的比较多。

二、相关知识

2.1 怎么在react.js中使用bootstrap

首先，在react中引入bootstrap。

npm install bootstrap

然后在index.js中引入bootstrap，在后续组件中使用bootstrap的时候就不需要再引入。
需要同时引入css文件和js文件。

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";

2.2 useEffect钩子

useEffect钩子是在渲染之后运行的程序。有一个作用是：根据React state控制非React组件。
在部分的内容中有三种写的方式：

  useEffect(() => {
    //代码
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);   //后面的依赖数据是空的，就是只在第一次渲染的时候运行

  useEffect(() => {
    //代码
    // eslint-disable-next-line react-hooks/exhaustive-deps
  });    //后面没有依赖，每次渲染的时候都会运行

  useEffect(() => {
    //代码
    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[img]);    //后面的依赖是img就只在img改变的时候再运行

2.3useRef钩子

ref和state之间的区别在于state变化之后组件会重新渲染，ref变化之后组件不会重新渲染。ref在整个组件生命周期内保持不变。

import { useRef } from "react”;

let currentIndex1 = useRef(0); //定义ref
//html中代码
<button onClick={() => {
    console.log(currentIndex1.current);
    currentIndex1.current = currentIndex1.current + 1;
}}>+1</button>

三、轮播图的自动播放功能实现

这部分分为两个问题，一个是自动播放的index，自动播放就是定时器interval；另一个是通过class类定义当前显示的图片，然后设置动画。
这里定义index只能是state，因为ref变化不会渲染，这样根据index改变的class类可能就改变不了。
思路如下图所示。

整体代码如下：
Recommend.tsx

import { useRef } from "react";
import React, { useEffect, useState } from "react";
import hyRequest from "../../service/index";
const Recommend = function () {
  const [img, setImg] = useState<any[]>([]);
  let currentIndex1 = useRef(0);
  const [currentIndex, setCurrentIndex] = useState(0);
  useEffect(() => {
    hyRequest.get({ url: "/banner" }).then((res) => {
      console.log(res);
      setImg(res.banners);
      console.log(img);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  useEffect(() => {
    console.log("设置定时器");
    const interval = setInterval(() => {
      //console.log(img, img.length);
      //currentIndex.current = (currentIndex.current + 1) % img.length;
      //console.log(currentIndex.current);
      setCurrentIndex((preCurrentIndex) => (preCurrentIndex + 1) % img.length);
    }, 3000);
    return () => clearInterval(interval); // 清除定时器
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [img]);
  return (
    <div>
      <h2>推荐</h2>
      <div id="carouselExample" className="carousel slide">
        <div className="carousel-inner">
          {img.map((item, index) => {
            //console.log(currentIndex, item, index);
            return (
              <div
                key={index}
                className={`carousel-item ${
                  index === currentIndex ? "active" : ""
                } ${index === currentIndex - 1 ? "preActive" : ""} ${
                  index === currentIndex + 1 ? "nextActive" : ""
                }`}
              >
                <img src={item.imageUrl} className="d-block w-100" alt="..." />
              </div>
            );
          })}
        </div>
        <button
          className="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExample"
          data-bs-slide="prev"
        >
          <span
            className="carousel-control-prev-icon"
            aria-hidden="true"
          ></span>
          <span className="visually-hidden">Previous</span>
        </button>
        <button
          className="carousel-control-next"
          type="button"
          data-bs-target="#carouselExample"
          data-bs-slide="next"
        >
          <span
            className="carousel-control-next-icon"
            aria-hidden="true"
          ></span>
          <span className="visually-hidden">Next</span>
        </button>
      </div>
      <div>{currentIndex1.current}</div>
      <button
        onClick={() => {
          console.log(currentIndex1.current);
          currentIndex1.current = currentIndex1.current + 1;
        }}
      >
        +1
      </button>
    </div>
  );
};
 
export default Recommend;

index.less

.nextActive {
  display: block !important;
  transform: translateX(100%);
  opacity: 0;
}
.active {
  transform: none;
  opacity: 1;
}
.preActive {
  display: block !important;
  transform: translateX(-100%);
  opacity: 0;
}