React Native: функция вызова при изменении состояния c

Question

Можно ли вызвать функцию, которую я определяю, при изменении состояния c?

Например:

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

Мне нужно вызывать startTimer всякий раз, когда setTimerOn (false) называется. Как мне это сделать, не вызывая startTimer каждый раз при рендеринге экрана?

Answer 1

useEffect идеально подходит, поскольку вы уже используете перехватчики React. Как указано в официальной документации -

Effect Hook позволяет выполнять побочные эффекты в функциональных компонентах

Итак, в вашем случае

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. Подробнее об этом здесь

Answer 3

Вы можете использовать ловушку 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);

С уважением