programmingSimilar presentations:
React: State, Virtual DOM и обработка событий
1.
План1.Состояние компонента (state)
2.Virtual DOM
3.Принцип работы Virtual DOM: "diffing" и "reconciliation".
4.Обработчик событий в React
2.
Состояние компонента (state)Состояние (state) — это данные, которые хранит
компонент и которые могут меняться со
временем в результате действий пользователя
или других событий.
Когда состояние компонента изменяется, React
автоматически перерисовывает (re-renders) этот
компонент, чтобы пользовательский интерфейс
(UI) отражал актуальные данные.
В функциональных компонентах для управления
состоянием используется хук useState.
3.
Состояние компонента (state)Хук useState возвращает массив из двух элементов: текущее значение состояния и
функцию для его обновления.
4.
Демонстрация разработки5.
Virtual DOMVirtual DOM (VDOM) — это программное представление реального DOM (объектной модели
документа), которое хранится в памяти.
Можно думать о нем как о легковесной копии или "чертеже" UI. React использует VDOM для
повышения производительности.
Вместо того чтобы напрямую манипулировать медленным реальным DOM при каждом
изменении, React сначала обновляет быстрый Virtual DOM.
6.
Virtual DOMПроцесс обновления UI с помощью VDOM состоит из нескольких шагов:
1.Изменение состояния: Когда состояние компонента меняется, React создает новое
дерево Virtual DOM.
2.Сравнение (Diffing): React сравнивает новое дерево VDOM с его предыдущей версией.
Этот алгоритм называется "сравнением" (diffing).
3.Согласование (Reconciliation): React определяет минимальный набор изменений,
который необходимо внести в реальный DOM, чтобы он соответствовал новому VDOM.
4.Пакетное обновление: React применяет все эти изменения к реальному DOM за одну
операцию, что очень эффективно.
7.
Virtual DOM8.
Демонстрация разработки9.
Обработчик событий в ReactОбработка событий в React очень похожа на работу с DOM-элементами в HTML, но имеет
несколько синтаксических отличий:
• Названия событий пишутся в стиле camelCase (например, onClick вместо onclick).
• В качестве обработчика вы передаете ссылку на функцию, а не строку.
• React использует так называемые "синтетические события" (Synthetic Events) — это
обертка над нативными событиями браузера, которая обеспечивает кросс-браузерную
совместимость.