спасибо

ведь одна из ключевых концепций реакта это виртуальный дом, суть которого в том что ты имеешь некое декларативное описание дерева в коде, с которым рекурсивно сравниваешь реальное и приводишь его к виду первого

но при таком подходе возникает проблема при рендере списков, ведь
по сути как виртуальный дом синхронизирует эти два дерева?
он смотрит на виртуальное и сравнивает его с реальным и если видит что какого-то элемента в реальном нету, он добавляетдобавляет его, если видит что вместо него стоит какой-то другой элемент, он заменяетзаменяет его, если видит что его нету - удаляетудаляет его и если видит что он просто изменился то обновляет обновляет его

но тогда возникает проблема при рендере списков, ведь представь что у тебя есть какой-то список товаров в наличие на странице:

li>item1
li>item2
...
li>item10000

и представь что один товар (item2) был полностью раскуплен и теперь его нудно убрать с этого списка
ты удаляешь его с виртуального дерева и получаешь:

li>item1
li>item3
...
li>item10000

теперь виртуальный дом проходится по элементам странице и видит что в виртуальном дерево вместо 2 элемента стоит 3, что тогда сделает виртуальный дом? правильно, обновит его, потом он увидит что вместо 3 стоит 4, что он сделает? тоже обновит его и таким образом он сделает 9998 обновлений и потом увидит что последнего элемента в виртуальном доме нету, а в реальном он есть, поэтому просто удалит его
поэтому вместо того чтобы просто удалить 1 элемент и все, он сделает 9998 изменений и 1 удаление, что совсем не производительно
и именно для того, чтобы реакт понимал что это за элемент списка именно, ведь все они похожи, он просит проставлять для них уникальный идентификатор

1. он смотрит на виртуальное и сравнивает его с реальным - это неверное представление. Реакт сравнивает только файбер три и помечает дифф а рендерер уже просто вносит эти изменения
2. теперь виртуальный дом проходится по элементам странице и видит что в виртуальном дерево вместо 2 элемента стоит 3, что тогда сделает виртуальный дом? правильно, обновит его, потом он увидит что вместо 3 стоит 4, что он сделает? - реакт просто не сможет пометить один элемент для удаления, а просто передаст в рендерер инфу что весь список новый

ну а почему не сможет? потому что он не понимает что этот элемент именно удалился, а не просто изменился

вы почти верно описали, только реакт ничего не знает о реальном dom

правильно, он ничего не знает о нем, а лишь знает как он должен выглядеть


но он ведь же просто по сутт рекурсивно проходится по этим деревьям и выполняет синхронизацию между ними или нет?

как должен выглядит знает только рендерер

ну хотя вроде как реакт хранит не не два виртуальных дерева, текущее и предыдущее и сначала как-то сравнивает их

ну в смысле, ты же создавая компоненты описываешь как они должны выглядеть, потом весь этот код выполняется и в итоге выходит примитивная структура, которая описывает как должно выглядеть деревл

Парни кто-то может подсказать как grid сделать в extReact? документация отстала версии на 2-3, не нашел адекватного рабочего примера

это и есть файбер три

типа ты там используешь jsx, он прогоняется чере бейбл, превращается в React.createElement, а уже этот хэлпер возвращает примитивную структуру

фацьер три?

fiber tree

это алгоритм react?

да

хм, даже не слышал о нем, надо почитать

я просто смотрел все это в исходниках

тогда почитайте rfc о файберах оно достаточно исчерпывающие

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