Больше недели уже то тут, то там натыкаюсь на новость, про сигналы в Preact. Как человек, вошедший в современный Реакт относительно недавно, решил разобраться, что же там случилось. (А помогли мне тредики в https://t.me/artalog)
Лонг стори шорт, для тех, кто как я и немножко прозевал последние годы.
Задача Реакта постоянно приводить отображение в соответствие с состоянием. Ну, т.е. у нас есть данные, данные меняются и нужно приводить картинку в соответствие этим данным. Состояние данных привязано к конкретному компоненту. Изменение состояния (стейта) компонента приводит к его ре-рендеру и ре-рендеру всех его потомков по цепочке (и не важно, какие пропсы потомки слушают. Просто все по цепочке все. до самого последнего, будут перерисованы). Получается, что чем ниже лежит у нас нужный стейт, тем лучше — меньший кусочек нашего фронта будет перерисован. Однако, часто мы вынуждены поднимать стейт выше, так как на нём завязано отображение нескольких компонент. А значит, чем выше мы поднимаем нужный стейт (чем более он общий), тем ре-рендерится больше, чем мы хотели бы.
Тут Реакт выкатывает нам в помощь
И нам говорят — Реакт быстрый, забейте, пусть рендерит лишнее. А в будущем, мол, мы выкатим автоматический memo. Но как-то неприятно, мы же тут алгоритмы на собеседованиях сдаём, чтобы квадраты не пилить, мы же за скорость, ну.
Короче, команда Preact смотрела на это, смотрела на другие решения на рынке (тот же Solid и Vue) и решила — хватит это терпеть, Реакт достал быть хуже всех, давайтевсё сломаем сделаем хорошо. И добавили новый реактивный примитив Signal, который выглядит как объект-контейнер с полем
Идея такая, что мы просто создаём Signal за пределами компонента и используем его значение внутри компонента через чтение
Более того, нам предлагают не просто читать
---
// Instead of this:
<p>Value: {count.value}</p>
// … we can pass the signal directly into JSX:
<p>Value: {count}</p>
// … or even passing them as DOM properties:
<input value={count} />
---
Такая вот революция — мы взяли то, что уже было у других, сделали попроще, но зато вы можете максимально просто использовать уже сейчас в вашем любимом продукте. Да, вы можете использовать это в «обычном» React. Но надёжность и совместимость с будущими версиями React вызывает большое беспокойство.
Лонг стори шорт, для тех, кто как я и немножко прозевал последние годы.
Задача Реакта постоянно приводить отображение в соответствие с состоянием. Ну, т.е. у нас есть данные, данные меняются и нужно приводить картинку в соответствие этим данным. Состояние данных привязано к конкретному компоненту. Изменение состояния (стейта) компонента приводит к его ре-рендеру и ре-рендеру всех его потомков по цепочке (и не важно, какие пропсы потомки слушают. Просто все по цепочке все. до самого последнего, будут перерисованы). Получается, что чем ниже лежит у нас нужный стейт, тем лучше — меньший кусочек нашего фронта будет перерисован. Однако, часто мы вынуждены поднимать стейт выше, так как на нём завязано отображение нескольких компонент. А значит, чем выше мы поднимаем нужный стейт (чем более он общий), тем ре-рендерится больше, чем мы хотели бы.
Тут Реакт выкатывает нам в помощь
memo, мы начинаем размечать компоненты как «чистые», чтобы предотвратить их ре-рендер и код становится всё более шумным. Тут же возникает проблема с
useContext, который снова приводит к ре-рендеру и мы должны либо дробить контекст на более мелкие контексты, либо делать дополнительные обёртки над чистыми компонентами.
И нам говорят — Реакт быстрый, забейте, пусть рендерит лишнее. А в будущем, мол, мы выкатим автоматический memo. Но как-то неприятно, мы же тут алгоритмы на собеседованиях сдаём, чтобы квадраты не пилить, мы же за скорость, ну.
Короче, команда Preact смотрела на это, смотрела на другие решения на рынке (тот же Solid и Vue) и решила — хватит это терпеть, Реакт достал быть хуже всех, давайте
.value.
Идея такая, что мы просто создаём Signal за пределами компонента и используем его значение внутри компонента через чтение
.value. Так как сам Signal является объектом, то его можно безопасно прокидывать везде — ссылка не меняется, нет причин для ре-рендера. В то же время сам фреймворк обновит компонент точечно в тот момент, когда изменится значение сигнала — такой вот удобный биндинг. И никаких массивов зависимостей.
Более того, нам предлагают не просто читать
.value, а положить сигнал целиком в строку или в аттрибут — и фреймворк точечно обновит этот участок в DOM (никакого VDOM!).
---
// Instead of this:
<p>Value: {count.value}</p>
// … we can pass the signal directly into JSX:
<p>Value: {count}</p>
// … or even passing them as DOM properties:
<input value={count} />
---
Такая вот революция — мы взяли то, что уже было у других, сделали попроще, но зато вы можете максимально просто использовать уже сейчас в вашем любимом продукте. Да, вы можете использовать это в «обычном» React. Но надёжность и совместимость с будущими версиями React вызывает большое беспокойство.