Beleszeretünk a React Fibre

A TLDR, a React Fiber egy belső motorváltás, amely lehetővé teszi a React számára, hogy áttörje a hívásverem határait. A létrehozása lehetővé teszi a React számára a munka szüneteltetését / elindítását. Végül a React felhasználói utalhatnak a munka „prioritására”.

Jelenleg nem tudunk közvetlenül kapcsolódni vele, akkor miért kellene törődnünk vele? Mert ez nagyon furcsa!

Reagáljon, mielőtt a Fiber olyan volt, mint egy gyors tempójú társaságban dolgozni, git nélkül.

Képzelje el, hogy egy hatalmas szolgáltatás közepén van, és a főnökének gyorsjavításra, pronto-ra van szüksége. Nem hagyhatja abba a munkát, mivel minden változtatása egy fájlban van, ezért elkötelezte magát a munka befejezése mellett.

Ha a git-et használnánk, akkor képesek lennénk egy ágnak elkötelezni a munkánkat, és átváltani egy gyors gyorsjavításra.

A Fiber segítségével a React szüneteltetheti és folytathatja a munkát, hogy mielőbb dolgozzon a fontosakon! ?

Dióhéjban reagálni a belsőre?

Hozz létre egy fát az összetevőkből. React elveszi ezt a fát, végigmegy rajta, és létrehoz egy virtuális modellt a végeredményről. Talán a DOM számára nyújt rendszert, esetleg a natív nyelvet célozza meg. Ezen a ponton ez nem számít a React számára.

Amint az alkalmazás frissül, a React újra és újra elvégzi a virtuális eredmény létrehozásának folyamatát. Minden alkalommal összehasonlítja az előző virtuális fát a következővel.

Ezen a ponton platformfüggővé válunk. Ha a DOM-nak renderel, előfordulhat, hogy egy elemen csak egy osztály változott. A React végigsétál a virtuális fán, megtalálja a változásokat és a lehető legkevesebbet frissíti.

Ez egy osztályattribútum frissítését vagy az egész DOM lebontását jelentheti. Ez a megbékélés.

Rost előtt ez volt az. A munkát lefektették, és a választott renderelő munkába állt. Még akkor is, ha a böngésző lemaradt, a felhasználó gépelt, vagy a bolygó fel akart robbanni, a render vonat nem állt meg. ?

Hogyan működik (magas szinten)?

A Fiber használatával a frissítések prioritása változó. A felhasználó által beírt bemenet frissítésének nagyobb prioritása van, mint egy több ezer összetevőt tartalmazó listának.

A rost a fa számítását olyan munkaegységekre bontja, amelyeket bármikor „elkövethet”. Mi tehát a munka egysége? Ez egyszerűen egy csomópont az alkatrészfában!

  1. A React mostantól szüneteltetheti, folytathatja és újrakezdheti az összetevő munkáját. Ez azt jelenti, hogy bizonyos életciklus-kampók többször is tüzelhetnek.
  2. A Reactnek lehet prioritás alapú frissítési rendszere. Ez lehetővé teszi a React csapat számára a renderelő finomhangolását, hogy a leggyakoribb használati esetekben a React a leggyorsabb legyen.

Ennek ellenére szeretnék egy kicsit erre az első pontra koncentrálni. A React el fog távolodni (de még mindig támogat!) Néhány régi életciklus-kampótól, és hozzáad néhány újat! ?

componentWillMount, componentWillUpdate, componentWillReceiveProps, Most tűz többször. Itt nem szabad kiváltania a mellékhatásokat.

Most olyan mellékhatásokat akar beindítani az életciklus-kampókban, amelyek csak egyszer fognak bekapcsolni: componentDidMountéscomponentDidUpdate

A sok componentWillReceiveProps érintett eset pótlására két új horgot kapunk.

  1. getDerivedStateFromProps amely nem fér hozzá az előző kellékekhez vagy az összetevő példányhoz, de lehetővé teszi az állapot szinkronizálását a kellékeivel.
  2. getSnapshotBeforeUpdatehozzáférést biztosít a DOM-hoz, mielőtt frissül. A visszatérített érték használható componentDidUpdate.
A 16.4. Reakciótól kezdve a getDerivedStateFromProps mostantól mindig a renderelési módszer előtt indul. Nem csak a kellékek frissítésekor!

Összefoglalva: a Fiber lehetővé teszi a React számára a renderelés finomhangolását, hogy megbizonyosodjon arról, hogy a legfontosabb frissítések a lehető leghamarabb megtörténnek, mindezt néhány életciklus-horog és egy liter Facebook-fejlesztői vér költségeiért. ?

Ha bármilyen kérdése van, vagy egy-egy React-mentorálást keres, nyugodtan bármikor tweeteljen @ yurkaninryan !

Ha tetszik az írásmódom, íme néhány más cikk, amit készítettem.

Sok szerencsét és boldog kódolást! ??