Как реагирует обновление части DOM?

Question

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

Я знаю, что для решения, обновлять DOM или нет, реагирующий сравнивает виртуальный DOM с перерисованным. Но я просто не понял, если в случае, если он решит обновить его - он обновляет все элементы конкретного повторно визуализированного компонента, или он знает, чтобы обновить только измененные элементы компонента?

Заранее спасибо,

Answer 1

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

Выход метода render() представляет собой объект javascript, который отображается на элемент DOM. Когда компонент изменяется, мы получаем новый реагирующий элемент. Затем он сравнивает новый элемент реагирования и его дочерние элементы в виртуальном DOM с повторным рендерингом с элементом и его дочерними элементами в старом виртуальном DOM. Если обнаружены какие-либо различия, он обновляет реальный DOM только в тех местах, где что-то изменилось (например, изменился текст кнопки), а не обновляет весь реальный DOM. Если различий не обнаружено, то реальный DOM не затрагивается.

Answer 2

Хорошим местом для лучшего понимания того, как реагирует решение перерисовывать элементы, является документация сверки , но я могу подвести итог:

Каждый раз, когда вызывается render (), реагирует на создание нового виртуального DOM, где корневой узел является компонентом, для которого вызывается функция рендеринга. Функция render () вызывается, когда изменяется либо состояние , либо реквизита компонента или любого его дочернего элемента. Функция render () уничтожает все старые виртуальные узлы DOM, начиная с корня, и создает новый виртуальный DOM.

Чтобы гарантировать, что повторное рендеринг компонентов является плавным и эффективным, React использует Алгоритм отклонения , чтобы сократить время, необходимое для создания нового дерева, до временной сложности O (n), обычно сложность времени для копирования деревьев> O (n ^ 2). Это достигается путем использования атрибута «ключ» на каждом из элементов в DOM. React знает, что вместо создания каждого элемента с нуля он может проверить атрибут «ключ» на каждом узле в DOM. Вот почему вы получаете предупреждение, если не устанавливаете атрибут «ключ» для каждого элемента, React использует ключи, чтобы значительно увеличить скорость его рендеринга.