169 похожих чатов

Народ, у меня появилась мысль что реакт мог бы добавить

одну киллер-фичу и снова стать круче чем другие js-фреймворки (потому ни в одном js-фреймворке я не слышал про такую фичу)
Фича довольно фундаментальна - это про возможность обратной связи от вложенных компонентов к родительскому во время рендера.
Представьте вы хотите сделать компонент <Svg> внутри которого будут рендериться svg-фигуры и дальше компонент <Rect/> который будет отвечать за рендер прямоугольника
<Svg>
<Rect top="10" left="20" width="20" height="40" color="green"/>
<Rect top="40" left="10" width="50" height="100" color="blue"/>
...
</Svg>
Ок, это реализуется довольно просто. Идем дальше - представим что мы хотим вкладывать прямоугольники друг в друга чтобы теперь их координаты вычислялись относительно родительского. То есть чтобы в этом примере
<Svg>
<Rect top="10" left="20" width="20" height="40" color="green"/>
<Rect top="40" left="10" width="50" height="100" color="blue"/>
</Rect>
...
</Svg>
у вложенного прямоугольника координаты были бы равны как top = 10 + 40; left = 20 + 10
Как бы вы это реализовали? Здесь очень важно не нарушать главную идею композиции компонентов то есть когда вложенную компонентную верстку можно вынести в отдельный компонент
<Svg>
<Rect top="10" left="20" width="20" height="40" color="green"/>
<MyRect/>
</Rect>
...
</Svg>

const MyRect = () => {
return <Rect top="40" left="10" width="50" height="100" color="blue"/>
}
Ок, это чуть посложнее но впринципе решаемо через реактовский контекст.
И наконец приходим к главному. Представим что дальше вам захотелось добавить фичу чтобы вложенные Rect-компоненты позиционировались друг за другом а размер родительского Rect-компонента вычислялся как сумма (или максимальное значение) от вложенных Rect-компонентов в зависимости от дополнительного пропса layout("horizontal" или "vertical")
<Svg>
<Rect layout="verical" height="hug">
<Rect height="10" ... />
<Rect height="20" ... />
</Rect>
</Svg>
И если фича позиционирования вложенных элементов друг за другом еще можно реализовать через контекст то вот фича height="hug" или width="hug" уже никак не реализуется сейчас в реакте потому что требует обратной связи (синхронно) от вложенных компонентов во время рендера родительского компонента
То есть родительскому компоненту Rect для того чтобы вычислить свои размеры нужно во время рендера пройтись по своим чилдренам и просуммировать размеры своих вложенных Rect-компонентов
Но он это сделать не может потому что среди чилдов могут быть не только Rect-элементы а и другие компоненты и этот процесс может продолжаться сколько угодно вглубь
<Svg>
<Rect layout="verical" height="hug">
<Rect height="10" ... />
<MyRect/>
</Rect>
</Svg>

const MyRect = () => {
return <RectWithSomething />
}

const RectWithSomething = () => {
return <Rect top="40" left="10" width="50" height="100" color="blue"/>
}
Что думаете? Мне кажется эта фича выведет на новый уровень идею композиции компонентов и позволит реализовать многие вещи которые сейчас невозможны в реакте и в других js-фреймворках

18 ответов

206 просмотров

Ты опять со своим кастомным редерингом где нет css и position:relative?

Богдан- Автор вопроса
Андрей Звёздочка
Ты опять со своим кастомным редерингом где нет css...

Не только, посмотри этот видос, там совсем другая задача для которой также нужна эта фича

Андрей Звёздочка
Ты опять со своим кастомным редерингом где нет css...

Там не про это. Там про полноценную двунаправленную связь с потомками. React.Children здорового человека

Dmitry Remezov
Там не про это. Там про полноценную двунаправленну...

В реакт как во вью хотят завести эммитинг?

Максим
В реакт как во вью хотят завести эммитинг?

Не эмиттинг, а статичную связь. И не хотят, это кто-то экспериментировал и никуда не пошло

такое в форесте будет?

Ты так и не объяснил что планируешь делать когда двусторонняя связь (которой уже лет 15 наверное) приведет к бесконечному циклу, когда апдейты дочерних компонентов приведут к изменению данных родительского, которые повлияют на расчет дочерних и так по кругу В расчетах свг координат крайне необходимо иметь единственный источник правды, ты в этом сам убедишься, когда попробуешь зарендерить что-то больше двух (сотен) квадратов, как это было в моем случае

Богдан- Автор вопроса
Дима Zerꙫbias
Ты так и не объяснил что планируешь делать когда д...

А я и не предлагаю решать циклические двухсторонние связи. Даже в алгоритме флейксбоксов можно найти примеры где срезаются углы чтобы избежать цикличных зависимостей и квадратичной сложности и народ как-то живет с этим. В целом я хотя и описал фичу на примере с лейаутом но сама фича не имеет отношение к лейауту и может применяться для множества других задач и здесь как раз приводится пример с компонентом <Select> и вложенными компонентами <Option>. Как уже выше сказали суть этой фичи - это "React.Children здорового человека"

Если ты не решаешь проблемы с которыми столкнуться пользователи, то твоя идея обретает фундаментальную проблему, все просто

Богдан- Автор вопроса
Дима Zerꙫbias
Если ты не решаешь проблемы с которыми столкнуться...

Можно подробнее что эта за фундаментальная проблема? Если что, то в этом видео уже показана рабочая реализация этой фичи в самом реакте (есть npm-пакет и можно самому потыкать если взять соотвествующую версию реакта 6-годичной давности), просто эта фича так и не доехала до реализа. То есть это не какая-то гипотетическая и фундаментально нереализуемая фича а что-то уже вполне работающее (хотя и предполагаю что в каких-то корнер-кейсах эта фича вполне могла вызывать проблемы в реакте раз она так и не была включена в релиз, поэтому вдвойне интересно узнать являются ли эти проблемы проблемами реакта или они связаны с самой фичей)

Богдан
Можно подробнее что эта за фундаментальная проблем...

Чтобы сделать обратную связь от чайлдов к паренту в реакте, достаточно пол часа, просто эту фичу не внедрили по тем соображениям, которые я тебе озвучил, ты не можешь от них просто так отмахнуться, они являются частью задачи, если решения нет — то решения нет) Вне зависимости от наличия пакета В целом хочу просто сказать что соотношение профит/проблемность у фичи близко к нулю

Дима Zerꙫbias
Чтобы сделать обратную связь от чайлдов к паренту ...

Так это уже работает) Только на максимально примитивном уровне (React.Children)

Если надо просто рендер выровнять то можно хоть через useEffect наверх диспатчить, но у меня такая шиза ревью не пройдёт)

Два квадрата в ряд поставить https://t.me/react_js/2045132

Похожие вопросы

Обсуждают сегодня

Всем привет! Имеется функция: function IsValidChar(ch: UTF8Char): Boolean; var i: Integer; ValidChars: AnsiString; begin ValidChars := 'abcdefghijklmnopqrstuvwxyzABCDE...
Евгений
44
Коллеги, я тут для личных нужд пошел ставить MQTT сервер, пощупал mosquitto, но ужаснулся отсутствию такой банальности, как HTTP API для посмотреть список топиков. А тут что,...
Maksim Lapshin
14
#include <stdio.h> #include <stdlib.h> #include <time.h> void mass_first_generate(int mass[5][7]) {     for (int N = 0; N < 5; N++) {         for (int A = 0; A < 7; A++) {   ...
Чувак
6
Всем привет! Решаю 99 OCaml Problems и столкнулся со следующей проблемой (прошу палками не забивать, я OCaml практически не трогал до этого момента): open OUnit2 let create_...
К|/|pи/\/\ 6е3yглbIи
2
<?php function prepareTel($data, $modx, $_multiTV) { if ($data['iteration'] == $data['row']['total']) { $data['tel'] = '<a class="link" href="tel: ' . $data['tel']...
Кирилл Гацевич
2
❓ Подскажите как сделать в группе телеги функцию (кнопку) пересылки сообщения где есть нарушение правил? Бот к каждому сообщению (по определенным ключам) добавляет снизу кнопк...
Alexander
4
Hi freinds. I'm reading an old Pascal book and I just want to compile and run its codes using fpc. What's your recommendation to use the environment efficiently? Please send m...
Shak
4
Ну вот просто даже давайте вот как. Какой нибудь конкретный кейс, можете в пример привести, где бч работает и приносит прикладную пользу, а не просто что бы было? Не крипту.
Alexander Andreev
22
https://www.linkedin.com/posts/ugama-benedicta-kelechi-codergirl-103041300_mobiledevelopment-fluttertraining-handsonlearning-activity-7263445699227254784-IdHB?utm_source=share...
CoderGirl
16
возможно ли как-то передать в электрон или таури медиа поток с рендера 2д движка? двиг запускается как dll, а дальше надо как-то отправлять рендер кодировать не подходит, зр...
Kyle Nekto
7
Карта сайта