Hogyan működik a React a motorháztető alatt

A React egy nagyon népszerű JavaScript könyvtár. Hetente több mint 5,5 millió letöltéssel a React nagy népszerűségnek örvend. De nem sok React fejlesztő tudja, hogyan működik a React a motorháztető alatt.

Ebben a bejegyzésben megpróbálok feltárni néhány érdekes dolgot a React-ről, amelyet Ön, mint React-fejlesztő érdekes lehet. Kezdjük az elején.

De mielőtt nekilátnánk, ha Ön a React fejlesztője, van néhány izgalmas hírem az Ön számára! Miután elkészítette ezt a cikket, kidolgozhat valami jót a React-szel, és útközben díjakat nyerhet :)

Mit csinál a React?

A React lényegében egy fát tart fenn számodra. Ez a fa képes hatékony diff számításokat végezni a csomópontokon.

Gondoljon HTML kódjára, mint fára. Valójában a böngésző pontosan így kezeli a DOM-ot (a renderelt HTML-t a böngészőben). A React lehetővé teszi, hogy hatékonyan újjáépítse DOM-ját a JavaScript-ben, és csak azokat a módosításokat hajtsa végre a DOM-ban, amelyek valóban megtörténtek.

A JSX szintaktikus cukor

Nincs semmi hasonló a JSX-hez - sem a JavaScripthez, sem a böngészőhöz. A JSX egyszerűen szintaktikus cukor nagyon specifikus JavaScript objektumok létrehozásához.

Amikor ilyet írsz:

const tag = 

Hello

amit lényegében ezt csinálsz:

const tag = React.createElement("h1", {}, "Hello")

Látja, hogy amikor beágyazott anyagokat kezd el írni, ezt nemcsak nehéz kódolni, de nagyon kellemetlenné is válik egy ilyen kódbázis fenntartása. A JSX így segít abban, hogy a HTML tisztasága eljusson a JavaScript erejéig.

De mit csinál maga a React.createElement? Létrehoz egy sima régi JavaScript objektumot. Valójában manuálisan hívhatja és meggyőződhet róla!

Látjuk, van egy ilyen tárgyunk:

{ $$typeof: Symbol(react.element), key: null, props: {children: "Hello"}, ref: null, type: "div" }

És ha elkezdünk ilyen elemeket fészkelni:

React.createElement('div', { }, React.createElement('p', {}, 'A p inside a div') ) 

Elkezdnénk beágyazott objektumokat szerezni:

Tehát most már tudja, hogy miután az összes JSX elemzésre került és az összes React.createElement hívás megoldódott, egy óriási beágyazott objektummal szállunk le, mint fent.

React Renderer

Ha most visszatér arra a pontra, ahol elindítjuk az alkalmazást, látni fogja, hogy az index.js fájlban a következő sort találja:

// .. prev code ReactDOM.render(, container)

Fentről tudjuk, hogy amikor elemzésre került sor, ez csak a React elemek hatalmas tárgya. Akkor hogyan képes a React tényleges div-eket és p-tageket felépíteni belőle? Ismerje meg a ReactDOM-ot.

A ReactDOM viszont rekurzívan létrehoz csomópontokat a „type” tulajdonságuktól függően, és végül hozzáfűzi őket a DOM-hoz.

Ezen a ponton világosnak kell lennie, hogy valójában miért nagyszerű lépés a React leválasztása a megjelenítőkről! A React egyszerűen annyit tesz, hogy elkészít egy felhasználói felület fájt, amelyet nemcsak az interneten, hanem olyan környezetekben is lehet használni, mint a mobil, mivel rendelkezésre áll egy renderelő, amely képes kommunikálni a fogadó operációs rendszerrel. Itt játszik a React Native. Látja, hogy a React Native a React könyvtárat használja, a ReactDOM-et viszont nem. Ehelyett maga a reakció-native csomag renderelő.

Ezt egy reagáló natív alkalmazásban tesszük meg az alkalmazás elindításához:

const { AppRegistry } = require('react-native') AppRegistry.registerComponent('app', () => MainComponent)

Néz! Nincs ReactDOM. Miért ne? Mivel nincsenek olyan módszereink, mint az appendChild, és nincs DOM-szerű környezetünk sem. Ehelyett a mobilokhoz szükségünk van a felhasználói felület támogatására közvetlenül az operációs rendszerből. De a React könyvtárnak nem kell ezt tudnia, erről a renderelő (React Native) gondoskodik.

Reagáljon a megbékélésre

Amikor azt mondjuk, hogy a React fenntartja a DOM egy példányát a virtuális DOM használatával a JavaScript-ben, és ezt bármilyen változásra elterjeszti, és a valós DOM-ra alkalmazza, akkor nem akarjuk, hogy a React nyers erővel lépjen fel. Reagáljon, valójában nagyon lusta megbékélést végez. A React a lehető legkevesebb változtatást tenné lehetővé, azaz megpróbálna újból felhasználni elemeket, attribútumokat, sőt stílusokat is, ha lehetséges!

Tekintsük ezt a példát:

stuff

Tegyük fel, hogy ezt a JSX kifejezést valamilyen feltétel vagy állapot segítségével megváltoztatja az alábbira:

something else

A diffúzálás közben a React jól látja, hogy az img tag ugyanazt a className-t használja mind a régi, mind az új fáknál, miért módosítanánk. És csak módosítaná az alt attribútumot, és továbblépne.

Van azonban fogás. Mivel nem akarjuk, hogy a React sokat számoljon a diffed részről, a React azt feltételezné, hogy ha egy szülő megváltozott, akkor határozottan megváltozott az azt tartalmazó alfa. Például:

I did not change

Ha ezt a JSX-t az alábbiakra módosítja a feltétel / állapot használatával:

I did not change

Bár láthatta, hogy nem kell újra létrehoznunk a belső p címkét, de a React nem tudja tudni, hogy a fa felülről való haladása közben (hacsak természetesen nem hajt végre nehéz fa diffikálást, amelyek sokkal drágább algoritmusok, mint a heurisztikus O (n) reakció következik a diffikáláshoz). Tehát a React úgy dönt, hogy elpusztít minden gyermeket (azaz megtisztító funkcióikat hívja meg a useEffect vagy a komponentWillUnmount osztály alapú összetevőkben), és újból létrehozza a gyerekeket a semmiből.

React Keys

Amikor elemeket ad hozzá / távolít el egy csomópontból, a React egyszerűen áthúzza az öreg fában lévő gyerekeket és a csomópont új fájában levő gyerekeket, és megjelöli azokat a helyeket, ahol minden hozzáadást / eltávolítást el kell végeznie. Ennek azonban hátránya van a fejlesztő további segítsége nélkül. Tekintsük ezt a példát:


    
  • A
  • B

Fontolja meg, hogy ez állapot / állapot szerint az alábbiakra változik:


   
  • Z
  • A
  • B

    Most, amikor a React elkezdi összehasonlítani a két listát a különbség szempontjából, akkor megtalálja a különbséget az 1. gyermekcsomópontnál, a régi A-t új Z-vé mutálja, majd a 2. gyermek-csomópontnál ismét a régi B-től az új A-ig mutálja, majd végül csatolja az új B csomópontot.

    Jobb módszer lenne azonban a meglévő A és B csomópont megőrzése, és csak a Z csomópont elöljárása. De honnan tudna erről React? A reakció gombok segítenének.

    A billentyűk csak egy jó módot kínálnak a React számára, hogy megtudják, mely elemek változtak vagy nem változtak a diffikálás közben. Ahelyett, hogy összehasonlítaná az egész elemet, a React összehasonlítaná a gyerekek billentyűit, hogy megnézze, melyik elemet kell hozzáadni / eltávolítani. Az alábbi módszer hatékony módja ugyanazon dolog végrehajtásának:

    
        
    • A
    • B

    Ha ez megváltozik:

    
        
    • Z
    • A
    • B

    React most már tudná, hogy az 'A' és a 'B' kulcs már létezik, ezért csak hozzá kell adnunk az új elemet a 'Z' kulccsal.

    React fejlesztő vagy? Mutassa meg React képességeit egy 3 perces interaktív játék kifejlesztésével a React-ban, és nyerjen csuklyákat, ingeket és kávéscsészéket ! Vegyen részt a codecomp-ban úgy, hogy itt csatlakozik a codedamn diszkord szerveréhez

    Tehát ezek néhány fontos fogalom volt, és úgy gondolom, hogy Önnek, mint a React fejlesztőinek valóban hasznos lehet megérteni a React lényegét és működését. Nyugodtan adjon át minden javaslatot vagy kérdést, amelyek ugyanarról szólnak.

    Kövess engem a twitteren további JS / kódoló tweetekért és dolgokért. Béke!