Как ReactJS позволяет мне использовать постоянные функции до того, как я их определю?

#javascript #reactjs

Вопрос:

Мне любопытно, как вы можете использовать значение до того, как вы определили его в ReactJS? Вот пример:

 function CounterApp() {
  const [counter, setCounter] = useState(0);

  const increaseValueTwice = () => {
    increaseValue() //NOT DEFINED AT THIS POINT
    increaseValue() //NOT DEFINED AT THIS POINT
  }

  const increaseValue = () => {
    setCounter(prevCounter => prevCounter   1);
  };

  return (
    <div>
      {counter}
      <br / >
      <button onClick={increaseValue}>Increase value</button>
      <br / >
      <button onClick={increaseValueTwice}>Increase value twice</button>
    </div>
  );
}

Функция increaseValue() используется до того, как она определена, и все же проблемы нет. Я смотрел какой-то учебник от 2019 года, и парень в учебнике получил ошибку при попытке сделать это, но у меня это работает, хотя и не должно?

Ответ №1:

я думаю, что концепция, которую вы ищете, это

Подъем

В основном интерпретаторы javascript сначала считывают все объявления переменных для заданной области, а затем начинают вызывать функции. В вашем случае это сложнее, потому что функции вызывают друг друга, но это все еще применимо.

Это логика, специфичная для javascript, поэтому, если вы пришли с других языков, это, вероятно, что-то новое.

Вы должны быть в состоянии воспроизвести эту точную вещь, запустив ванильный js-код через консоль браузера или nodejs. Это не относится к react конкретно.

Ответ №2:

Мы можем ссылаться на переменные const в коде даже до их объявления, если этот код не выполняется до объявления переменной.

К моменту запуска вашей функции (в ответ на событие click) значение const уже объявлено.

1. Хорошо, как насчет того, если бы у меня была эта строка сразу после объявления состояния счетчика? useEffect( () => {increaseValueTwice()} , []) Это также не выдает ошибку, даже если оно запускается при монтировании компонента.

2. @Stevan Что происходит, зависит от того, когда выполняется функция, которую вы передаете useEffect , в текущей версии React она выполняется после монтирования компонента (после возврата функции компонента). Это означает, что вы не получите никаких ошибок.

3. @Stevan Да, то, что он сказал. Если вы хотите получить ошибку, попробуйте выполнить вызовы increaseValue() вне вашей функции increaseTwice(). Они попытаются быть выполненными до того, как они будут определены, и это приведет к взрыву.

4. @RubenSerrate Я попробовал это, и это работает. Большое спасибо. Кажется, что он компилируется из-за концепции подъема, о которой я не знал (@NicolaRomani объяснил это очень хорошо), но затем он взрывается, как вы и сказали, при запуске. Пример, если кто-нибудь столкнется с этим: if(counter === 2){ console.log(increaseValue()) } const increaseValue = () => { setCounter(prevCounter => prevCounter 1); return "it ran twice this time" };