Реклама

Как React прерывает рендер: конкурентный рендеринг изнутри

#React #Начиная #Почему #Читать
Как React прерывает рендер: конкурентный рендеринг изнутри

Начиная с React 18 рендер можно прервать: срочные обновления обгоняют несрочные, даже если React уже взялся за несрочное. Если задуматься, вопросов много: — Как React посреди рендера отдаёт поток браузеру, чтобы тот обработал ввод, а потом продолжает с того же места? — Почему до React 16 он так не умел? — Кто решает, какие обновления срочные, и почему большинство рендеров не прерывается вообще? — Что происходит с незакоммиченными обновлениями, когда пришло что-то срочное? — И главное, как обновления, которые выстраиваются в очередь, не путаются в порядке, если срочное пришло позже, но должно обогнать несрочные? Читать далее

Начиная с React 18 рендер можно прервать: срочные обновления обгоняют несрочные, даже если React уже взялся за несрочное. Если задуматься, вопросов много:

— Как React посреди рендера отдаёт поток браузеру, чтобы тот обработал ввод, а потом продолжает с того же места? — Почему до React 16 он так не умел? — Кто решает, какие обновления срочные, и почему большинство рендеров не прерывается вообще? — Что происходит с незакоммиченными обновлениями, когда пришло что-то срочное? — И главное, как обновления, которые выстраиваются в очередь, не путаются в порядке, если срочное пришло позже, но должно обогнать несрочные?

Команда React сознательно не нагружает этим разработчиков: в анонсе React 18 конкурентность названа деталью реализации — в общих чертах понимать её стоит, а знать, как она устроена, необязательно. И это разумно: пользоваться startTransition можно, не заглядывая под капот. Но мне стало интересно, и я полез в исходники React 19.

Всё разбираем на одном простом примере — поиске по списку.