Что такое Fiber и конкурентный рендеринг в React?
- Как React прерывает рендеринг?
Fiber — внутренняя структура React: каждый элемент дерева представлен узлом-«волокном» с ссылками на родителя, потомка и соседа. Это позволяет выполнять работу кусками, приостанавливать её, отдавать управление браузеру и отбрасывать устаревшую. Рендер делится на фазу render (вычислить изменения, можно прервать) и фазу commit (применить к DOM синхронно, нельзя прервать). Конкурентный рендеринг использует это для приоритетов: срочные обновления (ввод) обгоняют несрочные (transition), Suspense показывает запасной интерфейс, пока данные не готовы.
- Двойная буферизация: текущее дерево и дерево в работе
- Побочные эффекты нельзя делать при рендере — он может выполниться несколько раз
- StrictMode в разработке намеренно повторяет рендер, чтобы найти нечистый код
А ещё Конкурентность — не многопоточность: всё в одном потоке, но с прерываниями
Подробно
Последствия для кода: рендер должен быть чистым, подписки на внешние хранилища — через useSyncExternalStore (иначе возможен «разрыв» интерфейса), эффекты — после commit.
Что хотят услышать
- Fiber как единица работы.
- Фазы render и commit.
- Приоритеты и прерывание.
- Требование чистого рендера.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✓Рендер делится на прерываемые куски с приоритетами; render прерываем, commit синхронен
- ✗Fiber запускает рендер в отдельных потоках процессора, а commit идёт кусками в фоне
- ✗Фаза commit может прерываться и повторяться, а фаза render всегда выполняется синхронно
- ✗Побочные эффекты безопасно выполнять во время рендера
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.