Пример использования startTransition и 3D-рендеринга В React 18 был добавлен конкурентный рендеринг. Основная его идея в том, что обновления стейта можно разделить на две категории: - Срочные обновления: обеспечивают оперативный отклик на пользовательские события, например, ввод текста или скролл. - Переходные обновления: представляют несрочные задачи для рендера UI, например, отображение датасета. Цель переходных обновлений состоит в том, чтобы создать более отзывчивый интерфейс. До React 18 все обновления стейта считались срочными и ввод текста или клик могли зафризить UI при рендере тяжелого компонента. В React 18 с помощью переходных обновлений рендер тяжелых компонентов будет происходить в фоне, в то время как UI будет оставаться отзывчивым. Конкурентный рендеринг может выполнять следующие вещи: - Yielding: React периодически ставит работу рендера на паузу, чтобы дать браузеру сделать другую работу. - Прерывание: при появлении срочных задач React ставит рендер несрочной задачи на паузу и начинает рендерить срочную задачу, чтобы UI оставался отзывчивым. - Отбрасывание старых результатов: если данные стейта для перехода устарели, то React отбрасывает старый рендер и начинает рендер по новой для свежего стейта. Доу-Чи Лиу в своем блоге показал, как использовать API конкурентного рендеринга startTransition для рендера тяжелого компонента с 3D моделью с визуализацией связей между пользователями в Github. Приложение содержит два компонента: - поисковая строка пользователя Github; - сцена с 3D визуализацией связей на three.js и react-three-fiber; dawchihliou.github.io/article…react-18