одну киллер-фичу и снова стать круче чем другие 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-фреймворках
Ты опять со своим кастомным редерингом где нет css и position:relative?
Не только, посмотри этот видос, там совсем другая задача для которой также нужна эта фича
Там не про это. Там про полноценную двунаправленную связь с потомками. React.Children здорового человека
В реакт как во вью хотят завести эммитинг?
Не эмиттинг, а статичную связь. И не хотят, это кто-то экспериментировал и никуда не пошло
такое в форесте будет?
Ты так и не объяснил что планируешь делать когда двусторонняя связь (которой уже лет 15 наверное) приведет к бесконечному циклу, когда апдейты дочерних компонентов приведут к изменению данных родительского, которые повлияют на расчет дочерних и так по кругу В расчетах свг координат крайне необходимо иметь единственный источник правды, ты в этом сам убедишься, когда попробуешь зарендерить что-то больше двух (сотен) квадратов, как это было в моем случае
А я и не предлагаю решать циклические двухсторонние связи. Даже в алгоритме флейксбоксов можно найти примеры где срезаются углы чтобы избежать цикличных зависимостей и квадратичной сложности и народ как-то живет с этим. В целом я хотя и описал фичу на примере с лейаутом но сама фича не имеет отношение к лейауту и может применяться для множества других задач и здесь как раз приводится пример с компонентом <Select> и вложенными компонентами <Option>. Как уже выше сказали суть этой фичи - это "React.Children здорового человека"
Если ты не решаешь проблемы с которыми столкнуться пользователи, то твоя идея обретает фундаментальную проблему, все просто
Можно подробнее что эта за фундаментальная проблема? Если что, то в этом видео уже показана рабочая реализация этой фичи в самом реакте (есть npm-пакет и можно самому потыкать если взять соотвествующую версию реакта 6-годичной давности), просто эта фича так и не доехала до реализа. То есть это не какая-то гипотетическая и фундаментально нереализуемая фича а что-то уже вполне работающее (хотя и предполагаю что в каких-то корнер-кейсах эта фича вполне могла вызывать проблемы в реакте раз она так и не была включена в релиз, поэтому вдвойне интересно узнать являются ли эти проблемы проблемами реакта или они связаны с самой фичей)
Чтобы сделать обратную связь от чайлдов к паренту в реакте, достаточно пол часа, просто эту фичу не внедрили по тем соображениям, которые я тебе озвучил, ты не можешь от них просто так отмахнуться, они являются частью задачи, если решения нет — то решения нет) Вне зависимости от наличия пакета В целом хочу просто сказать что соотношение профит/проблемность у фичи близко к нулю
Так это уже работает) Только на максимально примитивном уровне (React.Children)
Если надо просто рендер выровнять то можно хоть через useEffect наверх диспатчить, но у меня такая шиза ревью не пройдёт)
Это все дыряво и асинхронно
Два квадрата в ряд поставить https://t.me/react_js/2045132
Обсуждают сегодня