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

211 просмотров

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

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

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

Господа, а что сейчас вообще с рынком труда на делфи происходит? Какова ситуация?
Rꙮman Yankꙮvsky
29
А вообще, что может смущать в самой Julia - бы сказал, что нет единого стандартного подхода по многим моментам, поэтому многое выглядит как "хаки" и произвол. Короче говоря, с...
Viktor G.
2
30500 за редактор? )
Владимир
47
а через ESC-код ?
Alexey Kulakov
29
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
14
Добрый день! Скажите пожалуйста, а какие программы вы бы рекомендовали написать для того, чтобы научиться управлять памятью? Можно написать динамический массив, можно связный ...
Филипп
7
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Карта сайта