TLDR, React Fiber je interna promjena motora koja omogućuje Reactu da probije ograničenja snopa poziva. Njegova izrada omogućuje Reactu pauziranje / pokretanje rada po volji. Na kraju, korisnici React-a moći će nagovijestiti "prioritet" posla.
Trenutno ne možemo izravno surađivati s njim, pa zašto bi onda to trebalo brinuti? Jer stvarno je super!
Reagiranje prije Fibera bilo je poput rada u brzoj tvrtki bez gita.
Zamislite da ste usred velike značajke, a vašem šefu treba hitni popravak, pronto. Ne možete prestati raditi, jer su sve vaše promjene u jednoj datoteci, a vi ste posvećeni završetku ovog posla.
Da koristimo git, mogli bismo svoj posao predati grani i prebaciti se na granu brzih popravaka.
Uz Fiber, React može pauzirati i nastaviti s radom po volji kako bi što prije počeo raditi na onome što je važno! ?
Reagirati unutarnje dijelove ukratko?
Stvorite stablo komponenata. React uzima ovo stablo, prolazi kroz njega i stvara virtualni model krajnjeg rezultata. Možda prikazujete DOM-u, možda ciljate izvorni. U ovom trenutku to nije važno Reagirati.
Kako se vaša aplikacija ažurira, React će iznova i iznova raditi taj postupak stvaranja virtualnog rezultata. Svaki put uspoređuje prethodno virtualno stablo sa sljedećim.
U ovom trenutku postajemo ovisni o platformi. Ako generirate u DOM, moglo bi se dogoditi da se promijenila samo jedna klasa na jednom elementu. React će prošetati virtualnim stablom, pronaći ono što se promijenilo i ažurirati što je manje moguće.
To bi moglo značiti ažuriranje jednog atributa klase ili bi moglo značiti rušenje cijelog DOM-a. Ovo je pomirenje.
Prije Fibera, to je bilo to. Posao je postavljen, a ponuđač je odabrao posao. Čak i ako je preglednik zaostajao, korisnik je tipkao ili je planet trebao eksplodirati, vlak za prikazivanje ne bi se zaustavio. ?
Kako to djeluje (na visokoj razini)?
Uz Fiber sada postoje različite razine prioriteta za ažuriranja. Ažuriranje unosa u koji korisnik unosi veći je prioritet od popisa s tisućama komponenata.
Vlakna raščlanjuju računanje stabla na jedinice rada koje mogu „izvršiti“ u bilo kojem trenutku. Pa, što je jedinica rada? To je jednostavno čvor u vašem stablu komponenata!
- React sada može pauzirati, nastaviti i ponovo pokrenuti rad na komponenti. To znači da se određene kuke životnog ciklusa mogu aktivirati više puta.
- React može imati sustav ažuriranja zasnovan na prioritetima. To omogućuje React timu da fino podesi render tako da React bude najbrži tijekom najčešćih slučajeva korištenja.
Ipak, želim se malo usredotočiti na tu prvu točku. React će se odmaknuti (ali i dalje podržavati!) Neke stare kuke životnog ciklusa i dodati neke nove! ?
componentWillMount, componentWillUpdate, componentWillReceiveProps, Sada može otpustiti više puta. Ovdje ne biste trebali pokretati nuspojave.
Sada želite aktivirati nuspojave u kukama životnog ciklusa koje će se aktivirati samo jednom: componentDidMounticomponentDidUpdate
Da bismo nadoknadili velik broj slučajeva koji su componentWillReceiveProps pokriveni, primit ćemo dvije nove kuke.
getDerivedStateFromPropskoji nema pristup prethodnim rekvizitima ili instanci komponente, ali vam omogućuje sinkronizaciju stanja s rekvizitima.getSnapshotBeforeUpdatedaje vam pristup DOM-u prije nego što se ažurira. Vrijednost koju vratite je upotrebljivacomponentDidUpdate.
Od React-a 16.4, getDerivedStateFromProps sada se uvijek aktivira prije metode prikaza. Ne samo kada se rekviziti ažuriraju!
Ukratko, Fiber omogućuje Reactu da fino podesi prikazivanje kako bi osigurao da se najvažnija ažuriranja dogode što je prije moguće, a sve za male troškove nekih kuka životnog ciklusa i galona Facebook razvojne krvi. ?
Ako imate pitanja ili tražite mentorstvo React jedan na jedan, slobodno mi tweetnite u bilo kojem trenutku @yurkaninryan !
Ako vam se sviđa moj stil pisanja, evo nekih drugih članaka koje sam već radio.
Sretno i sretno kodiranje! ??