#CSS #JS #Лаборатория_веб_платформы
Реактивность — это когда изменение состояния одной штуки приводит к реакции — изменению состояния других штук. К примеру, если температура воздуха опустилась ниже 0°C, вода замёрзнет и сожмётся.
Реактивность в программировании тоже про реакцию на изменение состояния. Пример:
let doubled = number * 2;
// doubled равно 4
Число
number — это переменная состояния. Удвоенное число doubled «выводится» из этой переменной. Если число меняется, то удвоенное число по умолчанию не «обновится», нужно явно вычислить его ещё раз:
let doubled = number * 2;
// doubled равно 4
number = 5;
doubled = number * 2;
// doubled равно 10
Такая «ручная реактивность» неоптимальна. Современные JS-фреймворки, например Svelte, умеют в автоматическую реактивность. Для этого «реактивное» значение нужно явно определить, а фреймворк будет автоматически следить за изменением «источников» и пересчитывать состояние:
$: doubled = number * 2;
// doubled равно 4
number = 5;
// doubled стало 10
Нативные переменные в CSS — сразу реактивные «из коробки». Браузер будет следить за их изменением и пересчитывать все зависящие от них значения.
</div>
<div class="block modified">
</div>
--number: 20px;
--doubled: calc(var(--number) * 2);
width: var(--doubled);
/* width равно 40px */
}
.block.modified {
--number: 50px;
/* width стало 100px */
}