Javascript 如何声明变量以使该值不'；在每次DOM渲染时是否不更改？

如何声明一个变量，以便在DOM重新呈现时该值不会更改

现在，我在全局范围中声明“var slider”，并在“function replay”中更改其值，以便在“play”、“pause”和“resume”函数中使用该值

此解决方案可以工作，但当DOM重新呈现“var slider”时，会再次运行，并且变量“slider”又回到未定义状态

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;

import React，{useState，useffect，Fragment}来自“React”；
从“slidetag”导入*作为幻灯片；
const LessonReplay=道具=>{
const[clicked，setClicked]=useState（false）；
useffect（（）=>{
const fetchEntry=async（）=>{
let res=wait fetch（`/api/entries/lessonred/${props.match.params.id}`）；
res=等待res.json（）；
resp=JSON.parse（res[0]。正在录制）；
控制台日志（“1”，分别）；
重播（resp）；
};
fetchEntry（）；
}, []);
var slider；//在此处声明
功能回放（页）{
slider=新建slide.player（页面）；//此处设置的值
}
函数播放（）{
slider.play（）；//此处使用
}
函数暂停（）{
slider.pause（）；//此处使用
//setClicked（true）；
}
功能恢复（）{
slider.resume（）；//此处使用
//setClicked（false）；
}
返回(
玩
简历
暂停
);
};
导出默认LessonReplay；

您可以使用

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();
    }
  }

---

您可以使用

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();
    }
  }

---

你试过这个吗<代码>常量[滑块，设置滑块]=使用状态（null）；函数重播（页面）{setSlider（new slide.player（页面））；}Hey Suazithustra。谢谢你的建议。我试过了，但没用。我是个新手，所以可能是因为我执行错误。useRef工作了，你试过这个吗<代码>常量[滑块，设置滑块]=使用状态（null）；函数重播（页面）{setSlider（new slide.player（页面））；}Hey Suazithustra。谢谢你的建议。我试过了，但没用。我是个新手，所以可能是因为我执行错误。useRef工作得很好哇！看到你的回复后，我开始阅读useref。这东西很神奇。非常感谢你！！一切都与useRef一起工作！哇！看到你的回复后，我开始阅读useref。这东西很神奇。非常感谢你！！一切都与useRef一起工作！