Реакция с крючками: когда происходит повторное рендеринг?

Question

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

Давайте предположим, что компонент:

• Управляет состоянием с помощью useState
• Получает propsот его родителя

Произойдет ли повторный рендеринг непосредственно после следующих событий, и только в эти моменты времени?

• Компонент получает новый props
• state обновлен

Смежный вопрос

Давайте предположим, что компонент имеет несколько useState выражений и взаимодействие с пользователем приводит к обновлению нескольких состояний.

Будет ли компонент повторно визуализироваться несколько раз, после изменения значения state, или он объединит эти связанные изменения в один повторный рендеринг

Answer 1

Компонент выполнит повторную визуализацию в следующих случаях, учитывая, что он не реализует shouldComponentUpdate для компонента класса или использует React.memo для функции

• Компонент получает новые реквизиты
• состояние обновлено
• Значение контекста обновляется (если компонент прослушивает изменение контекста с использованием useContext)
• Родительский компонент повторно визуализируется по любой из вышеуказанных причин

Давайте предположим, что у компонента есть несколько выражений useState, а взаимодействие с пользователем приводит к обновлению нескольких состояний.

Будет ли компонент повторно визуализироваться несколько раз, для каждого измененного значения состояния, или будет пакетировать этисвязанные изменения в одном повторном рендеринге?

useState не объединяет обновленные значения с предыдущими, но выполняет пакетную обработку, как setState, и, следовательно, если несколько обновлений состояния выполняются вместе, один рендериметь место.