Пристальный взгляд на реактивное волокно
Все знают, что react-fiber будет включен в следующий релиз React, и Facebook уже использовал его в своей продукции. Итак, давайте подробнее рассмотрим, что такое react-fiber, зачем он нам нужен и, что более важно, как он влияет на наше существующее приложение react.
Прежде чем мы начнем, что означает даже волокно?
Удивительно, но в информатике есть термин волокно.
В компьютерных науках файбер — это особенно легкий поток исполнения.
Как и потоки, волокна имеют общее адресное пространство. Однако волокна используют совместную многозадачность, в то время как потоки используют вытесняющую многозадачность. Потоки часто зависят от планировщика потоков ядра, чтобы вытеснить занятый поток и возобновить другой поток; волокна позволяют запустить другое волокно во время выполнения.
Проблема с текущей реализацией реакции.
Поскольку мы знали, что волокно — это что-то вроде нити. давайте посмотрим на проблемы текущей реализации реакции.
из документа React Design Principles:
«В своей текущей реализации React рекурсивно обходит дерево и вызывает функции рендеринга всего обновленного дерева за один тик. Однако в будущем он может начать задерживать некоторые обновления, чтобы избежать потери кадров».
Ключевым моментом является следующее:
От обновления состояния до рендеринга компонента — это процесс планирования от запуска до завершения.
из концепции компонентов React как функций данных:
v = f(d)
Проблема в том, что если слишком много работы по обновлению выполняется одновременно, что означает, что пока ваше приложение занято обновлением дерева представления. пользователь не получит никакого ответа, пока не завершится весь процесс обновления.
Цель React-fiber
Документ React-fiber-architecture настолько хорош, что я просто процитирую его здесь:
«Это цель React Fiber. Fiber — это повторная реализация стека, специализированная для компонентов React. Вы можете думать об одном волокне как о кадре виртуального стека.
Преимущество повторной реализации стека заключается в том, что вы можете хранить кадры стека в памяти и выполнять их, когда (и когда) захотите. Это имеет решающее значение для достижения целей, которые мы поставили перед собой в плане планирования.
Помимо планирования, ручная работа с фреймами стека раскрывает потенциал таких функций, как параллелизм и границы ошибок. Мы рассмотрим эти темы в следующих разделах».
Пример кода выполнения react-fiber будет выглядеть так
var fibres = [work1, work2, work3, work4];
function doFiberWorks(deadline) {
while (deadline.timeRemaining() > 0 && fibres.length > 1) {
var work = fibres.pop();
doWork(work);
if (deadline.timeRemaining() > 0) {
commitWork(work);
} else {
fibers.push(work);
}
}
}
requestIdleCallback(doFiberWorks);
Коды приведены для иллюстрации; на самом деле это не часть React Fiber.
В качестве реального примера реализации react-fiber вы можете взглянуть на ReactFiberScheduler react-fiber.
Архитектура React-fiber
Для получения более подробной информации об архитектуре React Fiber, пожалуйста, ознакомьтесь с Архитектурой React Fiber.
Влияние на текущее приложение React
В идеале React-fiber должен быть обратно совместим. Однако волокно можно прервать, а затем возобновить. Поэтому некоторые методы жизненного цикла могут выполняться несколько раз в одном цикле рендеринга.
- КомпонентВиллМаунт
- КомпонентВиллРесиверПропс
- Долженкомпонентобновить
- Компонентуиллобдате
Обсуждение методов жизненного цикла на Github: https://github.com/facebook/react/issues/7678
Используйте React-fiber уже сегодня
Клонируйте реактивный репозиторий, измените два флага ниже и запустите npm run build.
