de Ryan Yurkanin

Să ne îndrăgostim de React Fiber

0*GOQYA azJHmi1N0N

TLDR, React Fiber este o schimbare 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 într-o companie cu ritm rapid, fără git.

Imaginați-vă că vă aflați în mijlocul unei funcții 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. se află într-un singur fișier, vă angajați 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.

Sa ne indragostim de React Fiber
Dacă nu ați folosit niciodată React, iată un exemplu de arbore de componente.

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 următorul.

Î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 va trece 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 Reconciliere.

Înainte de Fiber, asta era. Lucrarea a fost amenajată, iar 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 sprijini în continuare!) Unele cârlige vechi ale ciclului de viață și va adăuga unele noi! ?

componentWillMount, componentWillUpdate, componentWillReceiveProps, acum poate declanșa 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 și componentDidUpdate

Pentru a compensa o mulțime de cazuri de utilizare care 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. getSnapshotBeforeUpdate vă oferă acces la DOM înainte ca acesta să fie actualizat. Valoarea returnată este utilizabilă în componentDidUpdate.
0*OoDfQ7pzAqg6yETH
Acest grafic ilustrează modul în care funcționează cârligele ciclului de viață cu React Fiber

Începând cu React 16.4, getDerivedStateFromProps acum se declanșează întotdeauna înainte de metoda de redare. Nu doar atunci când recuzita se actualizează!

În concluzie, Fibra permite React să regleze fin redarea pentru a vă asigura că cele mai importante actualizări au loc cât mai curând posibil, totul pentru costul ușor al unor cârlige ale ciclului de viață și al galonilor de sânge pentru Facebook. ?

Dacă aveți întrebări sau sunteți în căutarea unui mentorat individual React, nu ezitați să mă 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ă! ??