面试官：用React写一个进度条叭。

只是用定时器简单的实现了，若要有更好的性能需求，请使用css动画animation。

效果图

JS

import './_index.css'
import { useState } from 'react'

let timer = null//递增进度的定时器
let totalTime = 2000//假设视频播放为2s

function App() {
  const [progress, setProgress] = useState(0)//进度
  const [isPlay, setIsPlay] = useState(false)//是否播放

  //setProgress的递增逻辑
  const handlerProgress = pre => {
    if (pre < 100) return ++pre;
    else {
      alert('播放结束')
      return 0//播放结束，重新开始播放
    }
  }

  //开始播放&&暂停播放
  const handleVideo = () => {
    setIsPlay(!isPlay);
    isPlay
      ? clearInterval(timer)
      : timer = setInterval(() => {
        setProgress(handlerProgress)
      }, totalTime / 100);
  }

  //重播
  const handleReplay = () => {
    setIsPlay(true)
    if (timer) clearInterval(timer);
    setProgress(0)
    timer = setInterval(() => setProgress(handlerProgress), totalTime / 100)
  }



  return (
    <div id="root">
      <div className='container'>
        <div className='progress' style={{ width: `${progress}%` }} ></div>
      </div>
      <button onClick={handleVideo} id='btn1'>{isPlay ? '暂停' : '播放'}</button>
      <button onClick={handleReplay} id='btn2'>重播</button>
    </div >
  )
}

CSS

.container {
    height: 20px;
    border: 1px solid black;
}

.progress{
    height: 100%;
    width: 0;
    background-color: green;
}
#btn1{
   margin-left: 45%;
}

记录记录！