Să ne îndrăgostim de React Fiber

TLDR, React Fiber este o modificare internă a motorului care permite React să rupă limitele stivei de apeluri. Creația sa permite React să întrerupă / să înceapă să redea lucrările după bunul plac. În cele din urmă, utilizatorii React vor putea sugera „prioritatea” muncii.

În prezent, nu putem interacționa direct cu acesta, așa că de ce ar trebui să ne pese de asta? Pentru că este foarte ciudat!

Reacționează înainte ca Fiber să fie ca și cum ai lucra la o companie cu ritm rapid, fără git.

Imaginați-vă că vă aflați în mijlocul unei caracteristici uriașe, iar șeful dvs. are nevoie de o remediere rapidă, imediat. Totuși, nu vă puteți opri din funcționare, deoarece toate modificările dvs. sunt într-un singur fișier, v-ați angajat să finalizați această lucrare.

Dacă am folosi git, am putea să ne angajăm munca într-o ramură și să trecem la o ramură rapidă de remediere rapidă.

Cu Fiber, React poate întrerupe și relua lucrările după bunul plac pentru a lucra la ceea ce contează cât mai curând posibil! ?

Reacționează internele pe scurt?

Creați un arbore de componente. React ia acest copac, îl parcurge și creează un model virtual al rezultatului final. Poate că redați către DOM, poate că vizați nativ. În acest moment, nu contează să reacționăm.

Acum, pe măsură ce aplicația dvs. se actualizează, React va face acest proces de creare a rezultatului virtual din nou și din nou. De fiecare dată, compară arborele virtual anterior cu cel următor.

În acest moment, depindem de platformă. Dacă redați către DOM, s-ar putea să se schimbe o singură clasă pe un element. React se va plimba prin arborele virtual, va găsi ceea ce s-a schimbat și se va actualiza cât de puțin poate.

Acest lucru ar putea însemna actualizarea unui atribut de clasă sau ar putea însemna demolarea întregului DOM. Aceasta este Reconcilierea.

Înainte de Fiber, asta era. Lucrarea a fost amenajată și cel care a ales-o a început să lucreze. Chiar dacă browserul rămânea în urmă, utilizatorul tasta sau planeta era pe punctul de a exploda, trenul de redare nu s-ar opri. ?

Cum funcționează (la un nivel înalt)?

Cu Fiber, există acum diferite niveluri de prioritate pentru actualizări. Actualizarea unei intrări pe care o tastează un utilizator are prioritate mai mare decât o listă cu mii de componente.

Fibra împarte calculul arborelui în unități de lucru pe care le poate „comite” în orice moment. Deci, ce este o unitate de lucru? Este pur și simplu un nod din arborele componentelor dvs.!

  1. React poate întrerupe, relua și reporni acum lucrul pe o componentă. Aceasta înseamnă că anumite cârlige ale ciclului de viață se pot declanșa de mai multe ori.
  2. React poate avea un sistem de actualizare bazat pe priorități. Acest lucru permite echipei React să regleze fin redarea, astfel încât React să fie cel mai rapid în cele mai frecvente cazuri de utilizare.

Totuși, vreau să mă concentrez puțin asupra primului punct. React se va îndepărta de (dar va susține în continuare!) Unele cârlige vechi pentru ciclul de viață și va adăuga unele noi! ?

componentWillMount, componentWillUpdate, componentWillReceiveProps, Se poate trage acum de mai multe ori. Nu ar trebui să declanșați efecte secundare aici.

Acum, doriți să declanșați efecte secundare în cârligele ciclului de viață care se vor declanșa o singură dată: componentDidMountșicomponentDidUpdate

Pentru a compensa o mulțime de cazuri de utilizare componentWillReceiveProps acoperite, vom primi două cârlige noi.

  1. getDerivedStateFromProps care nu are acces la recuzita anterioară sau la instanța componentă, dar vă permite să sincronizați starea cu recuzita.
  2. getSnapshotBeforeUpdatevă oferă acces la DOM înainte ca acesta să fie actualizat. Valoarea returnată este utilizabilă în componentDidUpdate.
Începând cu React 16.4, getDerivedStateFromProps acum se declanșează întotdeauna înainte de metoda de redare. Nu doar când se actualizează recuzita!

În rezumat, Fiber permite React să regleze fin redarea pentru a se asigura că cele mai importante actualizări se întâmplă cât mai curând posibil, toate pentru costul ușor al unor cârlige ale ciclului de viață și galoane de sânge pentru Facebook ?

Dacă aveți întrebări sau sunteți în căutarea unui mentor React individual, nu ezitați să-mi trimiteți pe Twitter @yurkaninryan oricând!

Dacă îți place stilul meu de scriere, iată câteva alte articole pe care le-am făcut.

Mult succes și codificare fericită! ??