Как вы объявляете переменную, чтобы значение не менялось при каждом рендеринге DOM?

Question

Как бы я объявил переменную, чтобы значение не изменялось при повторном рендеринге DOM?

Сейчас я объявляю «var slider» в глобальной области видимости и изменяю его значение в « «Воспроизведение функции», поэтому я могу использовать это значение в функциях «Воспроизведение», «Пауза» и «Возобновление».

Это решение работает, но когда DOM повторно выполняет рендеринг, «слайдер var» запускается снова и переменная «Слайдер» снова не определен.

import React, { useState, useEffect, Fragment } from "react";
import * as slide from "slidetag";

const LessonReplay = props => {
  const [clicked, setClicked] = useState(false);

  useEffect(() => {
    const fetchEntry = async () => {
      let res = await fetch(`/api/entries/lessonred/${props.match.params.id}`);
      res = await res.json();
      resp = JSON.parse(res[0].recording);
      console.log("1", resp);
      replay(resp);

    };
    fetchEntry();
  }, []);



  var slider;                                                  // Declared here

  function replay(pages) {
    slider = new slide.player(pages);                          // Value set here

  }

  function play() {
    slider.play();                                             // Used here
  }

  function pause() {
    slider.pause();                                            // Used here
    // setClicked(true);
  }

  function resume() {
    slider.resume();                                           // Used here
    // setClicked(false);
  }

  return (
    <Fragment>
      <div className="footer">
        <button onClick={play}>Play</button>

        <button onClick={clicked ? "" : resume} disabled={clicked}>
          Resume
        </button>
        <button onClick={clicked ? "" : pause()} disabled={clicked}>
          Pause
        </button>
      </div>
    </Fragment>
  );
};

export default LessonReplay;

Answer 1

Вы можете использовать useRef для того, что поддерживает неизменную ссылку, которая не изменяется при последовательных рендерах, если мы не установим ее.

const clickedRef = useRef(false);

// Somewhere in a callback or useEffect you can then do 

clickedRef.current = true;

Для вашего случая использования вы можете сделать что-то подобное.

const sliderRef = useRef(); 

  function replay(pages) {
    sliderRef.current = new slide.player(pages);                          
  }

  function play() {
    if(sliderRef.current) {
       sliderRef.current.play();
    }
  }

  function pause() {
    if(sliderRef.current) {
       sliderRef.current.pause();
    }
  }

  function resume() {
    if(sliderRef.current) {
       sliderRef.current.resume();
    }
  }