Давайте полюбимо React Fiber

TLDR, React Fiber - це внутрішня зміна двигуна, яка дозволяє React порушити межі стека викликів. Його створення дозволяє React призупинити / розпочати рендеринг роботи за власним бажанням. Врешті-решт, користувачі React зможуть натякати на “пріоритет” роботи.

В даний час ми не можемо безпосередньо взаємодіяти з ним, то чому ми повинні про це дбати? Тому що це справді дивовижно круто!

Реагувати до Fiber було як робота в швидкій компанії без git.

Уявіть, що ви знаходитесь посеред величезної функції, і ваш бос потребує виправлення, pronto. Ви не можете припинити роботу, хоча всі ваші зміни в одному файлі, ви прагнете завершити цю роботу.

Якби ми використовували git, ми могли б передати свою роботу гілці і перейти на гілку швидкого виправлення.

За допомогою Fiber React може призупинити і відновити роботу за власним бажанням, щоб якомога швидше почати працювати над важливими питаннями! ?

Зреагувати на внутрішні слова в двох словах?

Ви створюєте дерево компонентів. React бере це дерево, проходить його і створює віртуальну модель кінцевого результату. Можливо, ви здійснюєте візуалізацію в DOM, можливо, ви націлюєтеся на рідну. На даний момент це не має значення для реагування.

Тепер, коли ваша програма оновлюється, React буде робити цей процес створення віртуального результату знову і знову. Кожного разу він порівнює попереднє віртуальне дерево з наступним.

На даний момент ми отримуємо залежність від платформи. Якщо ви здійснюєте візуалізацію в DOM, можливо, змінився лише один клас на одному елементі. React пройде через віртуальне дерево, знайде, що змінилося, і оновить якомога менше.

Це може означати оновлення одного атрибута класу, або це може означати знос цілого DOM. Це примирення.

До Fiber це було все. Робота була викладена, і вибраний візуалізатор приступив до роботи. Навіть якщо браузер відставав, користувач набирав текст або планета збиралася вибухнути, поїзд візуалізації не зупинився. ?

Як це працює (на високому рівні)?

У Fiber тепер існують різні рівні пріоритету для оновлень. Оновлення введення, в яке вводить користувач, має вищий пріоритет, ніж список із тисячами компонентів.

Волокно розбиває обчислення дерева на одиниці роботи, які він може “здійснити” в будь-який час. То що таке одиниця роботи? Це просто вузол у вашому дереві компонентів!

  1. Тепер React може призупинити, відновити та перезапустити роботу над компонентом. Це означає, що певні гаки життєвого циклу можуть спрацьовувати не один раз.
  2. React може мати систему оновлення на основі пріоритетів. Це дозволяє команді React точно налаштувати візуалізатор, щоб React був найшвидшим під час найбільш поширених випадків використання.

Однак я хочу трохи зосередитись на цьому першому моменті. React збирається відійти від (але все ще підтримує!) Деяких старих гачків життєвого циклу і додати нові! ?

componentWillMount, componentWillUpdate, componentWillReceiveProps, Тепер може стріляти кілька разів. Тут не слід викликати побічні ефекти.

Тепер ви хочете запустити побічні ефекти в гачках життєвого циклу, які спрацюють лише один раз: componentDidMountіcomponentDidUpdate

Щоб компенсувати багато випадків використання, які componentWillReceiveProps охоплювали, ми отримаємо два нових гачки.

  1. getDerivedStateFromProps який не має доступу до попереднього реквізиту або примірника компонента, але дозволяє синхронізувати стан із вашим реквізитом.
  2. getSnapshotBeforeUpdateнадає доступ до DOM до оновлення. Повернене значення можна використовувати componentDidUpdate.
Станом на React 16.4, getDerivedStateFromProps тепер завжди спрацьовує перед методом візуалізації. Не тільки при оновленні реквізиту!

Підсумовуючи, Fiber дозволяє React точно налаштувати рендеринг, щоб переконатися, що найважливіші оновлення відбуваються якомога швидше, і все це за невелику вартість деяких гачків життєвого циклу та галонів крові розробника Facebook. ?

Якщо у вас є які-небудь запитання або ви шукаєте індивідуального наставництва React, сміливо пишіть мені @yurkaninryan будь-коли!

Якщо вам подобається мій стиль написання, ось кілька інших статей, які я вже робив.

Удачі та щасливого кодування! ??