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 ответов

121 просмотр

Ты опять со своим кастомным редерингом где нет 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

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

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

а зачем этот вопрос для удаления из чата?
Mёdkinson Medvezhkin
63
Всем привет! Подскажите. Я написал приложение на Delphi 10.2 Tokyo под Windows 10. И передо мной стал вопрос о том чтобы сделать это приложение кроссплатформенным (под Linux и...
Дмитрий Завгородний
24
Почему стало ломаться на D11? "739002.86400000' is not a valid timestamp" function IncDateTime(aStamp:TTimeStamp;aKind:TTriggerKind;aInterval:Integer):TDateTime; //aStamp = 2...
Катерина Свиридова
8
Привет всем. Подскажите где можно посмотреть, какая версия электрон, поддерживает версии windows? Некий changelog. Мне бы желательно, поддержку 7,8,10... latest, как понимаю и...
Anonym Squad
21
Портфолио: Зовут меня Александр, мне 36 лет. Город Пушкино. Общий рабочий стаж: ~14 лет Уровень квалификации: Senior Full-stack developer Где прочесть мой код? https://github....
Magic
10
Есть ли смысл устраиваться на 1с ? Даст это плюс в дальнейшем трудоустройстве на php? Просто у меня в городе вакансий на пхп нету. Или лучше удаленно искать. Опыта работы нету...
Azamat
14
Не ну фпц - это уже просто троллинг какой-то. Элементарный код нельзя собрать. ЧЯДНТ? program Project1; {$mode delphi} uses SysUtils, Classes, Generics.Collections; var...
Peter
4
а где есть mysql cloud кроме яндекс-клауд?
Oleg Nosov
13
hi im a cs student. i need some advice from people who have enough experience in Embedded Software. I need to know whether this profession is suitable for me. I have watched s...
Sahand 🏔️
8
А кто-нибудь запихивал сборку перловых модулей/образов с perl приложениями в окружения без интернета (в специализированном CI/CD)? У меня сейчас есть ряд cpanfile, которые н...
Andrey Smirnov / 𝓪𝓵𝓵𝓽𝓮𝓻 /
14
Карта сайта