【前端】 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 (<divkey={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><buttonclassName="carousel-control-prev"type="button"data-bs-target="#carouselExample"data-bs-slide="prev"><spanclassName="carousel-control-prev-icon"aria-hidden="true"></span><span className="visually-hidden">Previous</span></button><buttonclassName="carousel-control-next"type="button"data-bs-target="#carouselExample"data-bs-slide="next"><spanclassName="carousel-control-next-icon"aria-hidden="true"></span><span className="visually-hidden">Next</span></button></div><div>{currentIndex1.current}</div><buttononClick={() => {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;
}