Усередзінне розумеўце React Fiber: елементы працы, Render vs Commit і каналы прыоритэта

„Fiber“ — адно з тых тэрмінаў у React, якія павтараюцца значна чырэзь ад таго, калі іх ачынліваяюць. Разрабоўцы чуюць, што гэта новы двыгун, замена Virtual DOM-у, або ўсё, што стосуецца Hooks, але ніякі з гэтых апісаў не ёсць цалкам правым. У гэтым кяліку панява концэпцыя будуе з самага начала: спачатку проблемы, якія былі у React да версіі 16, потым што такое Fiber, як рэндарынг дзеліцца на два этапы, і як планаванне та прыорітэты дзейнуюць у гэтым контексте. До канца вы должны быць у стане точна ачынліваць Fiber, выяўляць распашчаныя уявленні та разумець, чаму такія API, як startTransition, залежаць ад яго.

Fiber ў адной фразе

React Fiber — это внутрэнняя архітектура супранормалізацыі, якая была уключана ў React 16. Яе задача — зробіць процес атрыбутавання керованым. У замест на тое, каб обрабатваць апдэйт як адну, недзелімую задачу, React моделюе цю працу як безліч маленьких елементаў, якія можна обрабатваць по аднаму і ранжаваць за значэнням.

Цю змяну лёгкае пазначыць, практыкуючы яе паралельна. До появы Fiber апдэйт праходзіў па простай лініі з пачатку да канца:

Before Fiber:

Update
  ↓
Render entire tree
  ↓
Commit changes
  ↓
Done

За дапамогою Fiber усередыне з’яўляецца ўзлок, дзе праца дзеліцца на часткі, і гэтыя часткі можна параджаваць, настаўляць паузу і продовжыць ў выконанні, прычаму нічога не прабывае на экране:

After Fiber:

Update
  ↓
Break work into units
  ↓
Process units
  ↓
Prioritize / pause / resume when appropriate
  ↓
Commit changes

Гэты дадатковы узлок ёсць адной з базаў для практычна всіх сучасных функцыяй атрыбутавання ў React. Ёсць калі лепш разумець, чаму гэта было праблемай для перапісвы, трэба паглядзець на тое, што было раней.

Супранормалізатор стака і яго слепыя пункты

Версіі React даўнейшыя за 16 выкорыстовалі тое, што зазвычай называецца Stack Reconciler. Абщая схема працы вяліка часткаю была вядома: змена стану прыводзіць да атрыбутавання элемента, якое пасля перапрацоўваецца у співставленні з пярэднім результатам, і тады апডейтуецца DOM.

State Change
    ↓
  Render
    ↓
Reconciliation
    ↓
DOM Updates

Проблема заключалася у тым, што процес співставлення веліся сінхронна. Такое названне падкрэпляецца тым, што працэс співставлення адбывался праз звычныя рекурсыўныя вызовы функцый, таму працэс застойваўся на самай стак-структуре JavaScript. Калі React пачынаў обрабоцуваць апডейт, у яго не было можлівасці стаячы на паўпаце, таму што такое стаячы означало б розбіранне той стак-структуры і втрату ўсіх досягнутых рэзультатаў. Уявіце сабе аплікацыю середньых размераў:

App
│
├── Header
├── Sidebar
├── Dashboard
│   ├── Chart
│   ├── Table
│   └── Statistics
├── Notifications
└── Footer

Якщо апдэйт змініў велику частка гэтага дрэва, React будзе праходзіць праз усі зачыненыя компоненты ў адной непаўерывной пасэ, ад першага да последнага, не вяртаючы кантроль назад:

Start rendering
      ↓
  Component A
      ↓
  Component B
      ↓
  Component C
      ↓
  Component D
      ↓
  Component E
      ↓
     ...
      ↓
   Finish

Рэзультат быў нормальным; проблема была ў часе. React не мог зупініць свою роботу і пракратыць яе пазней, таму всё іншае было змушана чакаць.

Чаму дзейсненне з вялікім часам пагубна для пользователя

У JavaScript няма самастоятнай галоўной вялі.

Як працюе браузер

Браузер выкарыстоўвае тую ж вялі для запуску обробнікаў змаганняў, вычыслення распакоўкі, атрыбутавання пікселей і стварэння кадраў:

Browser Main Thread
│
├── JavaScript
├── Event Handling
├── Layout
├── Paint
└── Rendering

Калі скрыпт утримвае вялі працэс на дзьвіг, усі іншы заведамення стаюць у чергу пасля яго. З точкі зоры пользователя ланцюг змаганняў выглядае так:

Click
 ↓
React starts large update
 ↓
Main thread remains busy
 ↓
Browser can't respond quickly
 ↓
UI feels slow

Клік фіксуецца пазней, натыск клавішы з’являецца пасля значныя затрымкі, анімацыя спаўняецца з перашкодамі. У маленькай аплікацыі процес выканання візуалайзацыі ўскора заканчываецца, таму ніхто гэтага не бачыць. Аднак, калі аплікацыя расте і колькасць взаімадзейсцоў збіраецца, фрэймворк патрабуе права на адлічэнне колы будзе выканана робота з візуалайзацыі і сколькі з яе будзе выканана за раз. Самэ гэтае прычыну, з якой быў створаны Fiber.

Основная ідея: робота як планаваныя елементы

Ментальная модель Fiber можа быць выражаная ў адной фразе: візуалайзацыя дзеліцца на адмініструемыя елементы роботы, якія React можа планаваць і прыоритэтызаваць.

Па старой модэлі інструкцыя для механізма супрацоўкі фактычна была адной командай:

"Render this entire tree."

Па модэлі Fiber React можа замест таго аналізаваць кожны окремы елемент і вяршыць, які з іх патрабуе першага внимання:

"Here is one piece of work."
"Here is another piece."
"Which work should I process first?"

Заместо глыбокага рэкурсыўнага вызову, калі выкарыстоваюцца аддзельныя часткі, React можа зупніцца пасля будзь-яй часткі, пераканацца, чы не ёсць болей важлівых задач, і продаваць працю пазней.

Што такое фібра

Фібра — это звычны об’ект JavaScript, які представляе адну единіцу працы ў внутранім дрэве React. На практыцы прыблізна адна фібра на кожны компонент чы элемент, які берае участак у супрацоўке з данымі. Узьмім гэтае маленькае дрэва компонентаў:

App
│
├── Header
├── Sidebar
└── Content

Канцэптуальна, React падтрымвае паралельную структуру, складаную з фібраў:

Fiber Tree

App Fiber
   │
   ├── Header Fiber
   ├── Sidebar Fiber
   └── Content Fiber

Рэальныя об’екты Fiber маюць гораздка большэй што толькі назву. Яны фіксуюць свае зв’язки з родным, дзецінскім і братскім вузламі, тип і ідэнтыфікатор компонента, чакаючыя параметры і стан, а таксама эфекты, якія павинны быць выкананы пасля таго, як робота будзе завершана. Самэўсёлкі этыя явныя зв’язки дазволяюць React праходзіць па дрэве за дапамою цыклу заместо рекурсіі, што у сваю чаргу дазволяе зупініцца і продаваць роботу. Аднак для всей архітектуры дапатнаецца памятаць адну формулу: Fiber — это единіца рэндарынгу та супрацоўкі з узгоджэнням у React.

Fiber не ёсць заменай Virtual DOM

Часта тверджэнне заключаецца ў тым, што Fiber „заменіў Virtual DOM“. Гэта не так. Ці два рашаюць разныя запытанні.

Virtual DOM — это описанне таго, як павінна выглядаць UI, якае React пораўняе з паказваным раней описам, каб выявіць, што павінна зменіцца:

Virtual DOM
    ↓
"What should the UI look like?"

Fiber — гэта механізм, які выкарыстоўвае React для арганізацыі та выканання задач, неабходных для досягнення цілі:

Fiber
    ↓
"How should React organize and process the work required to get there?"

Яны працуюць разам, але адны з яных ўособляе інтерфейс корыстувальца, а другі — спосаб обробкі задач. Якщо хочаце болей дакладна пазнайоміцца з аспектамі порэвання, перагляньце як механізм Virtual DOM diffing у React выбірае, што апдэйтаваць.

Дрэва fiber пад час апдэйта

React падтрымлівае сваё дрэва fiber пра весь час жыцця дапрыемства. Адно ўжо болей дакладнае прыклада показвае, як паддрэва ўтвараюцца ўнутры яго:

                 App
                  │
        ┌─────────┼─────────┐
        ↓         ↓         ↓
      Header    Sidebar    Content
                            │
                     ┌──────┴──────┐
                     ↓             ↓
                   Chart          Table

Калі змянююцца props або стан, React выкарыстоўвае гэтую структуру, каб знайсці веткі, якія патрабуюць обробкі, і прыгнуцца за іншымі.

Рэалізацыя перакладвання з можласцю перарыву

Самым важным наследкам такай лептактуры ёсць можлівасць паўзы рэндарування. Уявіце апдэйт, які складаецца з калькоў задач:

Large Update
     ↓
   Work 1
     ↓
   Work 2
     ↓
   Work 3
     ↓
   Work 4

За дапамогай сінхроннага рэкансіляйзера все чатыры калькоў задач мусілі выконвацца адразу. За дапамогай Fiber React можа обрабатваць калькі з іх, даць браузеру можлівасць адпаведаць на ввод чы выканаць рэндарування, а пасля продаваць працю:

Work 1
  ↓
Work 2
  ↓
Pause
  ↓
Browser gets an opportunity to handle other work
  ↓
Resume
  ↓
Work 3
  ↓
Work 4

Гэта сама па сабе не ёсць оптымізацыяю швайнасці; аб’ём работы застаецца тым жа. Работа проста больш не монаполізуе нить, што даёт React можлівасць планаваць ёе выконванне.

Две фазы: выяўленне змян, а потым ўпрацоўкі іх

Сучасны React не спрыявае апдэйту як даўнему пераходу з рэндарування да DOM:

Render → DOM

У замен кожны апдэйт праходзіць через две разлічныя фазы:

             React Update
                  │
                  ↓
             Render Phase
                  │
                  ↓
            Commit Phase
                  │
                  ↓
                 DOM

Фаза рэндарування вычысляе наступны UI

У фазе адаптавання React адказвае на пытанне, якага должна быць выгляду інтэрфейс корыстніка зараз. Конкрэтна, ён:

• з’яўляе функцыі компанентоў і обрабоцвае чакаючыя апдэйты
• стварае або супрацоўвае з дрэвам файбер
• выяўляе, што разлічаецца ад нынешняга дрэва
• скупляе спіс змян, якія трэба застосавіць

У вобразе дыяграмы ўводзяцца паказанае раней дрэва і новыя апдэйты, а выходзіць опис неабходных дзеянняў:

Previous Tree
      +
 New Updates
      ↓
Reconciliation
      ↓
   New Work

Паколькі нічога на гэтам этапе не падчыняецца DOM, яго можна перарваць у сучасным React. React можа вычысляць большую частку наступной структуры ў фоне, і ніхто не бачыць жаднага проміжнага стану. Гэта таксама поясняе, чырэй React спакульвае, што процес атрыбутавання мае быць без паблічных наследків: пад адночасным атрыбутаванням компонент можа быць атрыбутаваны больш чым раз пры тым, калі яго рэзультат ўсё ще не зафіксаваны, а ў режыме Strict Mode логіка атрыбутавання намерова вызываецца два разы, каб выявіць код, які не працуе пад такым заўважэнням.

Этап зафіксавання прыменяе рэзультат

Калі змяны стануць вядомымі, React іх зафіксавае:

Render Phase
     ↓
Changes determined
     ↓
Commit Phase
     ↓
DOM updated

Этап зафіксавання — гэта там, дзе вырабляюцца рэальныя змены: вузлы DOM дадаюцца, апдэйтуўваюцца чы скасываюцца, прыкладзяюцься refs, і выконваюцца эфекты лейауту. Практычны спосаб раздзеліць гэтыя два этапы:

Render Phase
"Let's figure out what needs to change."

Commit Phase
"Now apply those changes."

Чаму зафіксавання не можа быць паўзавана

Якщо паузы такі корисныя, чаму бы не робіць паузы скрозу? Таму ўжо, што экран павінен заставацца аднообразным. Уявіце, калі React зупініўся на паўпаце пад час запісу даных у DOM:

Update A
 ↓
DOM partially changed
 ↓
Pause
 ↓
Update B

Пользователь побачыў бы сумешанне старага і новага інтерфейсу, якога ніколі логічна не існавало. Таму React роздзеляе разныя аспекты: процес стварэння змян можа быць перерваны, пачаты занова або відхілены, але коміт застосовуе готавы результат адразу. Гэтыя межы є ключовымі для розумення сучаснага React.

Плануванне: не всі актуалізацыі роўназначныя

Калі робота дзеліцца на часткі, React можа пачаць выбіраць, якая частка мае найвышэйшую прыорітетнасць. Дзеякія актуалізацыі явна є болей трыбутнымі, чым іншыя. У відпаведнасці да гэтага:

User clicks a button

для пользователя ў тым моменты мае большое значэнне, чым гэта:

Rendering a large list somewhere else

Так сама, гэта:

Typing in an input

Прыткая рэакцыя на змены ўсё час яе важна. Серьозныя змены, якія выконваюцца ў іншых частках стораніцы, не павинны спрычыніць затримку адображэння симвалоў па адносу да клавіатуры. Тэхналогія Fiber забезпечвае структуру, якая дазволяе React аналізаваць такія разніцы і правільна распрацоўваць завданні.

Lanes: як React атрыбутуе прыорітет

Унутрана сучасныя тэгі React выконваюць апдэйты за дапамогою lanes, якія кодуюць ўсі прыорітеты. Код аплікацыі практычна ніколи не працюе безпосередня з lanes; React выкарыстоўвае іх, каб выбраць, якія з адлеглых апдэйтаў трэба обрабаты пад час конкретнага адображэння, а якія можна зачакаць. Спрасцаваны варыянт:

                Updates
                   │
       ┌───────────┼───────────┐
       ↓           ↓           ↓
     Urgent      Normal      Deferred
       │           │           │
       ↓           ↓           ↓
    Process      Process     Process
    sooner       normally    later

Калі трохі зв’язаных тэрмінаў з’яўляюцца разам, краща ўтримваць іх адзін ад другога:

Fiber
 ↓
Represents work

Scheduler
 ↓
Helps coordinate when work should happen

Lanes
 ↓
Represent priority of updates

Fiber апісвае саму роботу, планавальнік выбірае час яе адкана, а каналы паказуюць, насколькі трыбутна кожная змяна. Конкрэтныя реалізацыі эйх элементаў зменяліся межвыданнямі React, таму спрыймайце гэта як канцэптуальную модель, а не як опис чыннага коду.

Старое проты новага, пасля пасля

До появы Fiber сінхронная рэкансіляцыя адбывалася на основе стака, і як толькі ёй пачыналася, яна проста продовжвалася:

Update
  ↓
Reconcile
  ↓
Continue
  ↓
Continue
  ↓
Continue
  ↓
Finish

Не было магчымасці перарваць роботу чыста падкрэсліць адну змяну нарадзе іншай.

Архітектура Fiber включае рашэнняя па планаванні ў процес обробкі дадзеных:

Update
  ↓
Create / schedule work
  ↓
Process Fiber units
  ↓
Prioritize
  ↓
Pause / resume / restart when appropriate
  ↓
Complete render
  ↓
Commit

Як толькі оба прадукты разместыцца ручыма, змены стануць явнымі:

BEFORE FIBER:

Component Tree
      ↓
Synchronous Reconciliation
      ↓
Finish Everything
      ↓
   Commit


AFTER FIBER:

Component Tree
      ↓
Fiber Tree
      ↓
Units of Work
      ↓
Prioritize / Schedule
      ↓
    Render
      ↓
    Commit

Мета не была тым, каб React стаў шырэйшы, а тым, каб ён паказваў контроль над тым, як і калі адбываецца рэндарынг.

Пашчутныя уявленні

Fiber не дадзе новых нітак

Fiber не раздзеляе React на калькольвіка нітак:

React
 ├── Thread 1
 ├── Thread 2
 └── Thread 3

JavaScript-код React все ўсё выконваецца на галоўнай нітак у браузеры. Fiber – гэта форма саўместнага планавання: React добровольна перадае контроль між елементамі роботы, каб іншы задачы маглі выконвацца. Гэта прынципова адрозніця ад Web Workers, якія дзе-правда выконваюць код на адной з незалежных нітак.

Канкурантнае выконаванне не значыць адночаснае

Fiber ёсць тым, што дазволяе канкурантнае атрыбутаванне, але слова "канкурантнае" лёгка паспамінуць. Гэта не значыць, што React атрыбутуе все ў той ж самы момент. Гэта значыць, што React можа падготавіць апдэйт без блакання прыкладнення на весь час дзейства длігаг атрыбутавання. Тыповая последоўнасць:

Low-priority update
       ↓
React starts rendering
       ↓
Higher-priority update arrives
       ↓
React can prioritize the important work
       ↓
Continue / restart lower-priority work

Можна аджуставаць прыорітэт адразування з низкай прыоритэтам, калі з’являецца ўсё бол срочная задача, а пасля продаваць адразуванне чы рэстартаваць яго значна. Гэты механізм стоўіць адной з прычын болей павольных та прагнучых адносоў у сучасным React. Як гэта выглядае ў сераўе, статыя на частковым прадзеяваннем і адночасным адразуваннем раскрывае аспекты, прыменяваныя ў Next.js.

Fiber – гэта не „адна складовая за раз“

Таксама ўтраманная є думка, што Fiber адразувае толькі адну складовую, пасля якоў – наступную і так далей:

Component 1
Component 2
Component 3

Гэта занадто проста. Процесы пераскаквання, групавання та планавання ў React є болей складнымі, чым у простай лістоўцы; Fiber задае модель работы, якая є набаго болей дробнай, чым стары рекурсыўны падход.

Пераходы на практыцы

Пераходы — гэта там, дзе планаванне задач у Fiber стае видным у коде аплікацыі. Возьмемо поле пошуку, куда корыстнік яноўна запісаў:

User types: "rea"

Этот клавішны натиск запускае два разных вида дзейнасцяў:

1. Update the input immediately
2. Update a huge search result list

Адкорэктаванне вхідных дадзеных — гэта тое, што бачыць корыстнік; перзапуск дужа дугога списка рэзультатаў можа быць даскладным. React дазволяе пазначыць другі варіант як неактуальны, пакрыўшы адкорэктаванне статаусу функцыяй startTransition:

startTransition(() => {
    setSearchResults(results);
});

Запісаныя симвалы адносуюцца да актуальных адкорэктаванняў, таму поле застаецца чутлівым да дзейнасцяў:

User Input
    ↓
Urgent Update
    ↓
Keep UI responsive

Списак рэзультатаў адносіцца да пераходу, таму React можа яго адобразіць з меншай прыоритэтам і перарваць, якщо корыстнік продовжыць запісваць:

Search Results
    ↓
Transition
    ↓
Can be handled with lower priority

Два практычныя зауважэння. Першае: пераходы не робяць дорогія выконання працы дешэвей; яны толькі не дазволяюць ёй блакануць срочныя апдэты, таму медленны список можа яшчэ корыставацца методамі мемаізацыі або вярчування. Другое: саўстанне самага вхіднага даных павінна застацца параду ў пераходзе, інакш сама процедура вводу стане можлівайю для адкладэння, і поле будзе працаваць медленна. Ніякое з гэтых планаванняў не было б можлівым без фазы выконання, якая можа быць перарваная, яку забезпечвае Fiber.

Чаму React патрабавалася новая база

До Fiber React вже меў большасць таго, што люди з’яўляюць з яго:

• Вярчуваны DOM
• Спраўлянне супараднасці
• Модель компонентаў
• Эфектывае апдэйтаванне DOM

Перадзял быў спрытам да будучыні, а не да выправлення чагосьць зламанага. Аплікацыі рослі адразу па калькама напрамоў:

Larger
   +
More interactive
   +
More data-driven
   +
More complex

Такы рост значыў, што React павінен быў уважаць не толькі тае, што змянілася. Яму таксама было неабходна адпавядаць на запытанні, такія як калі трэба запускаць певную частку работы, насколькі важліва апдэйт, чы можна нацягнуць роботу, чы іншы апдэйт павінен праскочыць у рядку чакання, і як утрымацца ад блакавання вашчын, якія найбольш значны для корыстувача. Fiber — это архітектура, якая дазволяе адпавядаць на гэтыя запытанні.

Сценарый дашборда

Разглянем дашборд аналітыкі з калькамі важкага формата:

Dashboard
│
├── Navigation
├── Filters
├── Revenue Chart
├── User Chart
├── Large Data Table
└── Notifications

Калі корыстувач змянюе фільтр, простая рэалізацыя можа перераскладваць графікі і большую таблыцу за аднам дзеянням, і сам кантроллер фільтра будзе адпавядаць медленна. Пад архітектурой Fiber тая ж вашчын праходзіць через прапрацоўкі з прадактарызацыяй:

User changes filter
        ↓
Update begins
        ↓
React performs reconciliation
        ↓
Work is represented through Fiber
        ↓
Updates can be prioritized
        ↓
Rendering completes
        ↓
Commit changes

Чарты і табліцы яшчэ трэба пераскладзіць. Як павышаецца якасць — гнучкая рэакцыя на змены, калі React адмаўляецца гэтай роботай.

Fiber у пораўнанні з суседзяючымі концэптамі

Fiber і Вяртуальны DOM

Вяртуальны DOM — это представленне UI, якое викорыстоўвае React для выявлення таго, што трэба зменіць:

UI State
   ↓
Virtual Representation

Fiber — это внутрэшняя архітектура і структура дадзеных, праз якія React представляе і обрабоцвае роботу з відраслеванням:

Component / Element
       ↓
     Fiber
       ↓
Reconciliation + Scheduling

Разам яны складаюць систему відраслевання React:

Virtual DOM
      +
Fiber Architecture
      ↓
React Rendering System

Связаны, але не взаімназаменныя.

Fiber і Web Workers

Яны рашаюць абсалютна разныя проблемы. Fiber стосуецца:

Rendering
Reconciliation
Scheduling
Prioritization

Web Worker, на протываце, стосуецца:

Running JavaScript
outside the main UI execution context

Його структура выглядае так, пры чым важкія вычысленні пераносяцца з нитку, якая керуе UI:

Main Thread
     │
     ├── UI
     ├── React
     │
     ↓
Web Worker
     │
     ↓
Heavy computation

Fiber ніколи не переносіць процес адрэсавання React у рабочы процес. Якщо у вас є важкая за розрахункам задача, яка не стосуецца адрэсавання, такая як парсінг чыста вычыскі цифр, рабочы процес заставаецца правым інструментам; стаття на тэму спецыяльных, спільных і сервісных рабочых процэсаў детальна рассказвае пра гэтыя варыянты.

Што гэта значыць для вашага коду

У повсякдзеннай роботе вы ніколи не працуеце безпосередна з файбрамі. Вы пішаеце компоненты:

function App() {
    return <Dashboard />;
}

і вы запускаеце апдэйты:

setState(newValue);

React у тылу ператварае іх на задачі для файбраў. Ваш код знаходзіцца на верхнім роўні пайплайна, пра нижэйшыя ўзлы якога вам рэдка трэба думаць:

Your React Code
      ↓
React APIs
      ↓
Fiber Architecture
      ↓
Reconciliation
      ↓
Scheduling / Prioritization
      ↓
    Commit
      ↓
     DOM

Вы ніколи не створяеце вузлы Fiber вручную. Вам патрэбна такая ментальная модель: заставіце логіку атрыбутавання дадзеных чыстай, пакладзіце побачныя эфекты ў функціі effects або handlers, і выкорыстоўвайце пераходы для дарожлівых, некантэнтных апдэйтаў.

Найкорачэйшы можлівы падсумак

Стары механізм супраавязкі следав простам правілу:

"Start rendering → keep going → finish."

Fiber следуе іншам правілу:

"Break rendering into work → decide how to schedule it
→ complete the render → commit the result."

Этае разніцы ў сутнасі являюцца всім архітэктурным зменам.

Заключанне

Механізм супраавязкі на основе стека добра служыў React працоўна гады. Fiber адпавядае за запрашанні, якія выйшлі за межы його можаўнасцей. Эвалюяцыя ведзецца ад обмежанага карантролю:

Old React
   ↓
Synchronous Stack Reconciler
   ↓
Limited control over rendering work

до модэлю, дзе робота є чыста выражанай, можна планаваць і прыорітэзаваць:

React Fiber
   ↓
Fiber Tree + Units of Work
   ↓
More flexible reconciliation
   ↓
Scheduling + Prioritization
   ↓
Concurrent Rendering Capabilities

Калі хтось спытае, што такое React Fiber, адказ «новый двыгун рэндараў» недастаткова точны. Болей тачны адказ — Fiber ёсць внутраняя архітектура супароўвання дадзеных у React, якая моделюе рэндарыўкі як елементы работы, каб React мог узначыць час ўжывання, прадактывацыю, перарванне і адновленне гэтай работы, калі гэта дапаможыць.

Ключовыя выводы

• Fiber з’явіўся ў React 16 і заменіў рекурсывны, сінхронны Stack Reconciler.
• Fiber — это об’ект, які представляе адну елементарную единіцю рэндарыўкі, якая паў’язана ў дрэво, якое React можа праследаваць і на час зупініць.
• Фаза рэндарыўкі вычысляе змяны і можа быць перарваная; фаза застосавання ўжывае гэтыя змяны ў аднам неперарваным кроку.
• Lanes і планавальнік выкарыстоўваюць структуру Fiber, каб даць прыорітэт трыбутным апдэйтам перед апдэйтамі, якія адкладзены.

Fiber – гэта не Вярчыны ДОМ і не мнагатворная вёска; гэта саўместны планаванне на галоўнай вёсцы.

Адночасны атрыбутаванне і пераходы будуць створаны на гэтым аднаго, але яны керуюць дорогімі задачамі, а не ліквідуюць іх.

Спадні матэрыялы

• Планавальнік React і цикл змагання: хто насправды адлягае, калі будуць выкананы задачы — Пазнакайце, як саўместны планавальнік React працуе ўнутрь циклу змагання JavaScript, чаму пераходы можаць завершыцца, і чаму жадны планавальнік не можа вываліць заблокаваную вёску.
• Розумеўць React Lanes: Как чырвоны маскі кодуюць прыоритеты апдэйтаў — Дазвольце вам дазнацца, як React выкарыстоўвае чырвоны маскі, каб закодаваць кальколькі прыоритетаў апдэйтаў у адны цэлычысленны значэнне, і чаму для планавання заместа простых булевых флагоў выкарыстоўваюцься операцыі над бітамі.