Skip to content

Commit

Permalink
Заменяет минусы и короткие тире на длинные тире (doka-guide#5425)
Browse files Browse the repository at this point in the history
  • Loading branch information
Denis-GH authored Jul 8, 2024
1 parent c4fc102 commit 0f0e12a
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions tools/react-and-alternatives/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ tags:

## Кратко

Чтобы облегчить поиск изменений в приложении и работу с DOM браузера, некоторые фреймворки используют Virtual DOM. Virtual DOM объект, который хранит структуру дерева компонентов и их текущее состояние.
Чтобы облегчить поиск изменений в приложении и работу с DOM браузера, некоторые фреймворки используют Virtual DOM. Virtual DOM объект, который хранит структуру дерева компонентов и их текущее состояние.

_React_ использует Virtual DOM для отслеживания изменений. После каждого изменения состояния React создаёт новый Virtual DOM и сравнивает его с предыдущим, чтобы узнать, какие части приложения изменились.

Expand Down Expand Up @@ -58,9 +58,9 @@ Virtual DOM существует и работает только в ранта

Когда нужно обновить состояние, разработчик вызывает функцию для установки нового значения. Благодаря этому React узнаёт, когда начинать перерисовку. Такой подход является pull-реактивностью, так как мы явно даём знать React, что данные изменились, но фреймворк сам решит, в какой момент времени нужно обновить данные в браузере.

Главная особенность React это Virtual DOM. Когда React только появился, это было его главным нововведением. Вся логика отображения, выявления изменений и обновление браузерного DOM строится вокруг Virtual DOM.
Главная особенность React это Virtual DOM. Когда React только появился, это было его главным нововведением. Вся логика отображения, выявления изменений и обновление браузерного DOM строится вокруг Virtual DOM.

Функциональные компоненты и функция `render()` в классовых компонентах возвращают Virtual DOM. Все элементы в Vitual DOM — это объекты с одинаковым набором свойств, они очень похожи на [DOM-элементы](/js/element/).
Функциональные компоненты и функция `render()` в классовых компонентах возвращают Virtual DOM. Все элементы в Vitual DOM — это объекты с одинаковым набором свойств, они очень похожи на [DOM-элементы](/js/element/).

![Структура Vitual DOM](images/virtual_dom.png)

Expand Down Expand Up @@ -175,10 +175,10 @@ Vue.set(this.$data, 'spaceshipName', 'Starship')

## Vue 3

Текущая мажорная версия Vue 3. Поддержка Vue 2 закончилась 31 Декабря 2023 года.
Текущая мажорная версия Vue 3. Поддержка Vue 2 закончилась 31 Декабря 2023 года.
Vue 3 привнёс множество изменений в механике построения приложения и организации реактивности по сравнению с прошлой версией.

Vue 3 реализует реактивность через Proxy. Proxy это специальный JavaScript-объект, который позволяет следить за изменениями свойств другого объекта. Это даёт Vue 3 возможность отслеживать, когда свойство объекта было изменено или считано, и реагировать на это. При этом объект, отслеживаемый с помощью Proxy, ничем не отличается от обычного.
Vue 3 реализует реактивность через Proxy. Proxy это специальный JavaScript-объект, который позволяет следить за изменениями свойств другого объекта. Это даёт Vue 3 возможность отслеживать, когда свойство объекта было изменено или считано, и реагировать на это. При этом объект, отслеживаемый с помощью Proxy, ничем не отличается от обычного.

Каждое свойство Vue 3 оборачивается отдельным `Proxy`

Expand All @@ -205,7 +205,7 @@ data.peopleOnMars = new Proxy(data.peopleOnMars, {
data.spaceshipName = 'Starship'
```

Vue 3 не только отслеживает свойства объектов, но и оборачивает функции в *эффекты*. Эффект это обёртка вокруг функции, которая формирует порядок вызова и следит, какую функцию нужно вызвать.
Vue 3 не только отслеживает свойства объектов, но и оборачивает функции в *эффекты*. Эффект это обёртка вокруг функции, которая формирует порядок вызова и следит, какую функцию нужно вызвать.

Упрощённо, эффекты во Vue 3 устроены так:

Expand All @@ -215,7 +215,7 @@ Vue 3 не только отслеживает свойства объектов
const effects = []
```

* есть функция `addEffect()`, которая создаёт эффекты. Перед вызовом эффект записывается в список запущенных, а после выполнения - удаляется:
* есть функция `addEffect()`, которая создаёт эффекты. Перед вызовом эффект записывается в список запущенных, а после выполнения удаляется:

```js
const addEffect = fn => {
Expand Down Expand Up @@ -279,7 +279,7 @@ function instance($$self, $$props, $$invalidate) {
}
```

Код выше - это небольшая часть того, что скомпилировал Svelte. Здесь видно, как в изначальную функцию добавилась специальная функция `$$invalidate`, которая пометила, что данные изменились, и тем самым запланировала обновление DOM-элемента, где используется это значение.
Код выше это небольшая часть того, что скомпилировал Svelte. Здесь видно, как в изначальную функцию добавилась специальная функция `$$invalidate`, которая пометила, что данные изменились, и тем самым запланировала обновление DOM-элемента, где используется это значение.

## Заключение

Expand All @@ -291,4 +291,4 @@ Angular помогает разработчику с помощью автома

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

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

0 comments on commit 0f0e12a

Please sign in to comment.