Рендеринг пользовательского интерфейса в React JS

В React.js setName() и другие изменения состояния выполняются не напрямую, а асинхронно. Это приводит к тому, что в вашем коде выводится старое имя. Простым решением было бы:

import { useState } from 'react';

export default function FeedbackForm() {
  const [name, setName] = useState('');

  function handleClick() {
    const newName = prompt('What is your name?');
    setName(newName);
    alert(`Hello, ${newName}!`);
  }

  return (
    <button onClick = {handleClick}>
      Greet
    </button>
  );
}

Когда вызывается ваша функция React, DOM генерируется на основе ее текущего состояния. Если где-то в коде активируется перехватчик или создается событие, которое изменит DOM, произойдет повторный рендеринг. Таким образом, каждый раз, когда вы видите в коде «setX()», этот фрагмент кода будет «выполняться» не при текущем рендеринге, а через некоторое время после этого рендеринга и до следующего* рендеринга. Вот почему происходит бесконечный рендеринг, если вы вызываете хук при каждом рендеринге.

Обновлено: * «следующий» рендеринг означает более поздний рендеринг. Технически, если вы видите рендеринг, а затем вызывается перехват, потенциально между «этим» текущим рендерингом и «следующим» рендерингом может быть рендеринг.

Ваше понимание жизненного цикла рендеринга React и управления состоянием не совсем правильное. Событие onchange срабатывает всякий раз, когда входные данные изменяются. Когда это событие срабатывает, оно асинхронно ставит состояние в очередь на обновление через setTo и setMessage. Пока ничто не блокирует цикл событий, он будет обновлять состояние и повторно отображать (если есть что перерисовывать). Состояние на самом деле обновляется в следующем цикле цикла событий, но это будет выполняться в фоновом режиме, прежде чем вы успеете это заметить. Технически он не обновляется в вашей onchange рутине. В вашем втором примере нет ничего, что нужно было бы перерисовывать, поэтому вы не видите изменений в пользовательском интерфейсе. Однако состояние ЕСТЬ обновляется.

Причина, по которой вы видите Hello, ! в первом примере, заключается в том, что метод handleClick блокирует цикл событий до его завершения, что означает, что состояние name фактически не обновится до следующего цикла цикла событий.

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

Если вы хотите увидеть это с некоторой задержкой, вы можете просто изменить обработчик событий onchange на следующий:

{e => {console.info(to); console.info(message); setMessage(e.target.value)}}

В приведенном выше случае вы увидите предыдущее состояние переменных to и message до их обновления. Если вы внесете несколько изменений для запуска нескольких журналов консоли, вы увидите, что состояние действительно обновляется перед отправкой формы.

Вы «ставите в очередь» изменения состояния, помещая новое событие в очередь событий. JavaScript является однопоточным, поэтому цикл событий удаляет из очереди любое событие, которое находится следующим в очереди. Но если вы просто нажимаете на элементы в DOM, цикл событий наверняка выполняет события в фоновом режиме, потому что было бы крайне неэффективно блокировать, пока вы не нажмете определенную кнопку, чтобы обработать все изменения состояния.

Вот полный пример, который покажет вам, как состояние действительно обновляется при каждом событии onchange.

import { useState } from 'react';

export default function Form() {
  const [to, setTo] = useState('Alice');
  const [message, setMessage] = useState('Hello');

  function handleSubmit(e) {
    e.preventDefault();
      alert(`You said ${message} to ${to}`);
  }

  return (
    <form onSubmit = {handleSubmit}>
      <label>
        To:{' '}
        <select
          value = {to}
          onChange = {e => setTo(e.target.value)}>
          <option value = "Alice">Alice</option>
          <option value = "Bob">Bob</option>
        </select>
      </label>
      <textarea
        placeholder = "Message"
        value = {message}
        onChange = {e => setMessage(e.target.value)}
      />
      <h1>To: {to}</h1>
      <p>Message: {message}</p>
      <button type = "submit">Send</button>
    </form>
  );

Добавление h1 и p не требуется, поскольку входные данные формы буквально используют текущие значения состояния переменных to и message, но размещение этих значений состояния за пределами входных данных может помочь вам увидеть, что происходит.

Я хотел бы узнать, почему не возвращается второй код: вы сказали «Привет» Алисе.

Потому что к моменту отправки формы изменения состояния уже обработаны. Это связано с тем, что событие onchange обновляет состояние асинхронно, и эти асинхронные события завершатся до того, как будет выполнено событие отправки формы.