Пакетные обновления в react


Что такое пакетные обновления в react

Проще говоря, для повышения производительности react объединяет несколько обновлений состояния в одно обновление состояния.

Например, если у вас есть несколько setState внутри одного и того же события click, react будет вызывать рендеринг только один раз и объединит все эти обновления состояния в одно обновление, которое и вызовет рендеринг.

Это может быть неожиданностью, поскольку ранее мы знали, что react вызывает рендеринг всякий раз, когда встречает метод setChange.

Как вы думаете, что будет выведено в консоли после нажатия на кнопку?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      flag: false,
    }
  }

  handleButtonClick = (event) => {
    console.log("Button clicked");

    this.setState({
      counter: this.state.counter + 1,
    });

    this.setState({
      flag: !this.state.flag,
    });
  }

  render() {
    return (
      <>
        <h1>{`Counter: ${this.state.counter}`}</h1>
        <h1>{`Flag: ${this.state.flag}`}</h1>

        <button onClick={this.handleButtonClick}>Click me</button>

        {console.log("render")}
      </>
    );
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте пройдемся по приведенному выше примеру:

Я создаю компонент класса App и внутри него есть два значения, которые инициализируются в конструкторе: counter и flag. Я буду изменять эти значения всякий раз, когда кнопка будет нажата через событие onClick, передавая функцию handleButtonClick. Эта функция обновит состояние counter и flag, но она дважды вызывает setState.

Что можно ожидать:

Сначала «render» выводится один раз из-за начального рендеринга. Затем при нажатии на кнопку «render» будет выведено дважды, потому что вы дважды вызвали setState.

Что происходит на самом деле:

Тот же начальный вывод «render», но когда кнопка нажата, «render» выводится в консоль только один раз. Это показывает нам, что react собирает несколько state в одно обновление, которое и вызывает рендеринг.

Надеюсь, теперь вы понимаете, что такое пакетные обновления в React. Если вы нашли здесь какие-либо ошибки, пожалуйста, сообщите мне об этом в комментариях.

Оцените статью
devanswers.ru
Добавить комментарий