Question

只要特定状态发生变化，是否可以调用我定义的函数？

例如：

function Component(props) {
   const [timerOn, setTimerOn] = useState(false);
   function startTimer() {
      setTimerOn(true);
      setTimeout(() => setTimerOn(false), 1000)
   }
   startTimer();
}

每当调用setTimerOn（false）时，我都需要调用startTimer。我该怎么办而不在每次渲染屏幕时都调用startTimer？

Answer 1

useEffect在这里非常理想，因为您已经在使用React钩子。如官方文档中所述-

效果挂钩可让您在功能组件中执行副作用

对于您而言，

function Component(props) {
   const [timerOn, setTimerOn] = useState(false);
   function startTimer() {
      setTimerOn(true);
      setTimeout(1000, () => setTimerOn(false))
   }

   // This code is for it to run for the first time when your component mounts. 
   // Think of it as the previous componentDidMount function
   useEffect(() => {
     startTimer();
   }, []);

   // This code is for it to run whenever your variable, timerOn, changes
   useEffect(() => {
     if (!timerOn) {
       startTimer();
     }
   }, [timerOn]); // The second parameters are the variables this useEffect is listening to for changes.
}

Answer 2

您可以使用钩子useEffect，当依赖项数组中的任何值发生更改时，该钩子都可以使您执行代码。您可以这样使用它

useEffect(()=> {
  doSomethingWhenFooChanges();
},[foo]);

编辑以丰富答案：

您可以执行以下操作：

function Component(props) {
  const [timerOn, setTimerOn] = useState(false);
  function startTimer() {
     setTimerOn(true);
  }

  //Declaring timer variable
  let timer;

  useEffect(()=> {
    if(!timerOn) {
      timer = setTimeout(() => setTimerOn(false), 1000);
      startTimer();
    } else {
       //To prevent memory leaks you must clear the timer
      clearTimeout(timer);
    }
  }, [timerOn]);
}

无论如何，我无法想到在可以使用setInterval时需要重新启动计时器的情况。该函数每隔“ n”秒执行一次函数。它的用法是：

setInterval(()=> {
  myFunctionToBeExecutedEvery1000ms();
}, 1000);

致谢

Answer 3

由于您已经在使用钩子。在此场景中，useEffect挂钩将助您一臂之力。 More about it here

React Native：当特定状态改变时调用函数

3 个答案: