Блог

В документах React есть много мест, где говорится, что React может поставить в очередь пакет изменений состояния и выполнить их все один раз позже.

Документы компонента React

setState() ставит в очередь изменения состояния компонента и сообщает React, что этот компонент и его дочерние элементы необходимо повторно отобразить с обновленным состоянием. Это основной метод, который вы используете для обновления пользовательского интерфейса в ответ на обработчики событий и ответы сервера.

Воспринимайте setState() скорее как запрос, чем как немедленную команду для обновления компонента. Для повышения воспринимаемой производительности React может отложить его, а затем обновить несколько компонентов за один проход. React не гарантирует, что изменения состояния будут применены немедленно.

setState () не всегда немедленно обновляет компонент. Это может привести к пакетной обработке или отложению обновления на более поздний срок. Это делает чтение this.state сразу после вызова setState() потенциальной ошибкой. Вместо этого используйте componentDidUpdate или обратный вызов setState (setState(updater, обратный вызов)), любой из которых гарантированно сработает после применения обновления. Если вам нужно установить состояние на основе предыдущего состояния, прочитайте об аргументе программы обновления ниже.

React перехватывает ссылку на API

Основные хукеры — useState

const [state, setState] = useState(initialState);

Возвращает значение с сохранением состояния и функцию для его обновления.

Во время первоначального рендеринга возвращаемое состояние (state) совпадает со значением, переданным в качестве первого аргумента (initialState).

Функция setState используется для обновления состояния. Он принимает новое значение состояния и ставит в очередь повторный рендеринг компонента.

ВОПРОС 1

Мой вопрос: независимо от того, сколько обновлений состояния React решит поставить в очередь для выполнения в одном пакете, могу ли я полагаться на то, что при следующем рендеринге будет использоваться самое текущее состояние со всеми обновлениями, которые были поставлены в очередь с момента последнего рендеринга?

ВОПРОС 2

Могу ли я полагаться на порядок тех изменений состояния, которые React решает поместить в очередь? Я имею в виду, если я setState({a:1}) и затем setState({a:2}) могу ли я быть уверен, что конечное значение моего состояния будет 2 ?

Вопрос 1: Нет, React может отображать (например) только половину очереди обновлений, а затем другую.

Вопрос 2: Да. Порядок, в котором обрабатываются обновления, может быть не таким простым, как порядок, в котором вы вызываете setState , но, в конце концов, порядок вставки определяет последнюю версию вашего состояния.

Подробное объяснение в коде react.