update ts

docs/react/02-v-dom.md

@@ -2,4 +2,59 @@
 sidebar_position: 2
 ---
 
-# Виртуальный DOM
+# Виртуальный DOM
+Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает.
+ 
+## Virtual DOM (Виртуальный DOM)
+### Что такое Virtual DOM?
+Virtual DOM — это легковесная копия реального DOM (Document Object Model). Это JavaScript-объект, который представляет структуру HTML-документа. В React Virtual DOM используется для оптимизации обновлений интерфейса.
+
+### Как это работает?
+1. **Создание Virtual DOM:**
+   - Когда вы создаёте компоненты в React, они не напрямую взаимодействуют с реальным DOM. Вместо этого React создаёт Virtual DOM — JavaScript-представление структуры вашего интерфейса.
+2. **Рендеринг Virtual DOM:**
+   - При первом рендере React создаёт Virtual DOM на основе JSX и отображает его в реальный DOM.
+3. **Обновление Virtual DOM:**
+   - Когда состояние (state) или пропсы (props) компонента изменяются, React создаёт **новый Virtual DOM** (на основе обновлённых данных).
+4. **Сравнение Virtual DOM:**
+   - React сравнивает новый Virtual DOM с предыдущим (этот процесс называется **Reconciliation** или "согласование").
+   - React определяет, какие части Virtual DOM изменились. 
+5. **Обновление реального DOM:**
+   - React вносит минимально необходимые изменения в реальный DOM, чтобы он соответствовал новому Virtual DOM. Это позволяет избежать полного перерисовывания страницы.
+
+## Reconciliation (Согласование)
+### Что такое Reconciliation?
+Reconciliation — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений, которые нужно применить к реальному DOM. Этот процесс делает React эффективным, так как обновляется только то, что действительно изменилось.
+### Как это работает?
+1. **Diff-алгоритм:**
+   - React использует алгоритм сравнения (Diffing Algorithm), чтобы определить различия между старым и новым Virtual DOM.
+   - Алгоритм работает на основе следующих правил:
+     - Элементы разных типов: Если тип элемента изменился (например, **`<div>`** стал **`<span>`**), React удаляет старое дерево и создаёт новое.
+     - Элементы одного типа: Если тип элемента остался прежним, React обновляет только изменённые атрибуты (например, **`className`**, **`style`**).
+     - Дочерние элементы: React рекурсивно сравнивает дочерние элементы. Если порядок дочерних элементов изменился, React может переупорядочить их в реальном DOM.
+2. **Ключи (Keys):**
+   - Чтобы помочь React эффективно обновлять списки, разработчики используют атрибут **`key`**. Ключи позволяют React идентифицировать элементы списка и избежать ненужных перерисовок.
+   - Например, здесь **`key`** помогает React понять, какие элементы были добавлены, удалены или изменены. 
+```jsx
+<ul>
+  {items.map(item => (
+    <li key={item.id}>{item.name}</li>
+  ))}
+</ul>
+```
+3. **Пакетное обновление (Batching):**
+   -React группирует несколько обновлений состояния в один пакет, чтобы минимизировать количество операций с реальным DOM. Это улучшает производительность.
+
+
+### Преимущества Virtual DOM и Reconciliation
+1. **Производительность:**
+   - Операции с реальным DOM медленные, а Virtual DOM позволяет минимизировать количество таких операций.
+2. **Упрощение разработки:**
+   - Разработчики могут сосредоточиться на описании того, как должен выглядеть интерфейс в конкретный момент времени (на основе состояния), а React автоматически обновляет DOM.
+3. **Кроссплатформенность:**
+   - Virtual DOM используется не только в веб-приложениях, но и в React Native для мобильной разработки.
+
+## Итог
+- **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
+- **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
+- Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.