Reactjs 我可以在react中执行单独的fadeIn效果组件吗

我在react中做了一个滑块，效果很好。但是我想我的代码不是很好，我想改进它，那么你能告诉我代码的哪一部分可以改进吗？是否可以构建一个具有fadeIn效果的单独组件，这样我就可以通过在App.js中导入来添加该效果

---

嗨，我只是稍微更新一下你的应用程序组件 如果您多次使用同一组件，则最好使用map

import React, { useState, useRef } from "react";
import "./styles.css";
import Slider from "./Slider";
import Button from "./Buttons";
import imageLists from "./imageLists";
import Paginations from "./Paginations";

export default function App() {
  const [index, setIndex] = useState(0);
  const images = imageLists;
  const fade = useRef();

  const nextBtn = () => {
    setIndex(index + 1);
    fadeIn();
  };
  const prevBtn = () => {
    setIndex(index - 1);
    fadeIn();
  };

  if (index === images.length) {
    setIndex(0);
  }
  if (index < 0) {
    setIndex(images.length - 1);
  }

  const fadeIn = () => {
    fade.current.classList.add("fadeIn");
    setTimeout(() => fade.current.classList.remove("fadeIn"), 500);
  };

  const activeCircle = num => {
    setIndex(num);
    fadeIn();
  };

  return (
    <div className="row no-gutters">
      <div className="container">
        <div className="col-sm-12">
          <h1 className="text-center mb-2">Image Slider</h1>
          <Slider index={index} images={images} myref={fade} />
          <div className="mb-3">
            {images.map((data,i)=>
            <Paginations
                click={() => activeCircle(i)}
                className={index === i ? "active" : ""}
              />
              )}          
          </div>
          <Button nextBtn={nextBtn} prevBtn={prevBtn} />
        </div>
      </div>
    </div>
  );
}

import React，{useState，useRef}来自“React”；
导入“/styles.css”；
从“/Slider”导入滑块；
从“/”按钮导入按钮；
从“/ImageList”导入ImageList；
从“/Paginations”导入分页；
导出默认函数App（）{
const[index，setIndex]=useState（0）；
常量图像=图像列表；
常数fade=useRef（）；
const nextBtn=（）=>{
setIndex（index+1）；
fadeIn（）；
};
常量prevBtn=（）=>{
setIndex（索引-1）；
fadeIn（）；
};
如果（索引===images.length）{
setIndex（0）；
}
如果（指数<0）{
setIndex（images.length-1）；
}
常数fadeIn=（）=>{
fade.current.classList.add（“fadeIn”）；
setTimeout（（）=>fade.current.classList.remove（“fadeIn”），500）；
};
常量activeCircle=num=>{
setIndex（num）；
fadeIn（）；
};
返回(
图像滑块
{images.map（（数据，i）=>
activeCircle（i）}
className={index==i？“活动”：“}
/>
)}          
);
}

谢谢@Waleed Nasir