如何以最快的速度重新渲染 DOM

Question

我正在嘗試在固定的時間內在屏幕上移動文本，為此我想出了以下代碼

import React, { Component, useState, useEffect, useRef } from "react";
import { PrismCode } from "react-prism";
import { Player, ControlBar } from "video-react";
import { Button } from "reactstrap";
import { getSub_Millis } from "../../services/srtreader";

export default function Rythmoband(props) {
  const initialPosition = useRef(
    props.rythmoPosition === undefined ? "30%" : props.rythmoPosition
  );

  const [number, setnumber] = useState(
    props.dialogueNumber === undefined ? 0 : props.dialogueNumber
  );
  const [timerCheck, setTimerCheck] = useState(true);
  const [moverNumber, setMoverNumber] = useState(0.001);
  const [currentTime, setCurrentTime] = useState(0);

  const textMover = () => {
    let x = parseFloat(initialPosition.current);
    let start = getSub_Millis(props.time[number][0]);
    let end = getSub_Millis(props.time[number][1]);

    let timeToMove = start - end;
    setMoverNumber((timeToMove / 2500) * props.player.playbackRate);

    setCurrentTime(props.time.currentTime);
    x = x + moverNumber;
    let y = `${x}%`;
    initialPosition.current = y;
  };
  setTimeout(() => {
    textMover();
    timercheck();
    backChecker();
  }, 0.1);
  const timercheck = () => {
    if (
      getSub_Millis(props.time[number][1]) - props.player.currentTime * 1000 <
      1
    ) {
      initialPosition.current = "30%";
      setnumber(number + 1);
    }
  };
  const backChecker = () => {
    for (let index = 0; index < props.time.length; index++) {
      if (
        getSub_Millis(props.time[index][1]) > props.player.currentTime * 1000 &&
        getSub_Millis(props.time[index][0]) < props.player.currentTime * 1000
      ) {
        setnumber(index);
      }
    }
  };

  return (
    <>
      <div
        style={{
          width: window.innerWidth,
          background: "#FF8232",
          marginTop: "20px",
          height: "75px",
          position: "relative",
          border: "5px solid black",
        }}
      >
        <div
          style={{
            width: "5px",
            background: "red",
            marginTop: "20px",
            height: "75px",
            position: "absolute",
            top: "-25%",
            left: "25%",
          }}
        ></div>

        <strong
          style={{
            position: "absolute",
            left: initialPosition.current,
            top: "25%",
            fontSize: "2rem",
          }}
        >
          {props.dialogue[number]}
        </strong>
      </div>
    </>
  );
}

在上面的代碼中，setTimeout 負責在設定的時間后重復調用相同的函數，從而以計算的方式在屏幕上移動文本。 現在的問題是文本元素的移動是塊狀的而不是平滑的，盡管我也嘗試改變時間間隔和移動速度。 如果有人可以幫助我找出一種使文本移動更流暢的更好方法，我將不勝感激。

Answer 1

1. 為了性能，避免每次都更新 state
2. setTimeout 接受毫秒，意味着 0.1 毫秒對性能來說非常困難，可能是 0.1 秒。
3. React 上有很多 animation 包，這個很機械
4. 解決方案：改為使用 css 轉換