Szerezd meg a fejét az öt tényezővel

Tanulási reagálása, a JavaScript könyvtár a Facebook és Instagram felhasználói felületek létrehozásához diófélék, amíg meg nem adja esélyt. A dolgok sokkal könnyebbek, ha megérted öt kulcsfogalmat. Hívom ezeket az öt elme eltolódását. Ezek: komponensek, JSX, állapot, életciklus módszerek és egyirányú adatáramlás.

01. Összetevők

Az összetevők olyan kódok, amelyek kombinálhatók, hogy összetettebb funkcionalitást biztosítsunk. Ha az alkalmazás összetevőire osztja, megkönnyíti a frissítést és karbantartást. Reakcióban az összetevők még fontosabbak: nem csak programozzák őket, akkor az alkalmazásodat úgy gondolja, hogy ezek az összetevők összefonódnak.

Használjuk az alábbi interfészt példaként. Láthatja, hogyan lehet három darabra osztani: egy doboz új találkozási foglaláshoz, egy listás nézet, amely lehetővé teszi a meglévő találkozók megtekintését, valamint a keresési mezőt.

A HTML-ben azt gondolhatja, hogy ez az alkalmazás olyan elemek, mint ez:

 & lt; div id = "petappointments" & gt;
  & lt; div osztály = "addappointments" & gt; & lt; / div & gt;
  & lt; div osztály = "Searchappointments" & gt; & lt; / div & gt;
  & lt; div osztály = "listappointments" & gt; & lt; / div & gt;
& lt; / div & gt; 

És ez azt is, amit szeretne reagálni. Egy címke (& lt; div id = "petappointments" & gt;), amelyek petpointments komponenst hívnak, ami szükség szerint felhívja a többi alkatrészeket. Az ilyen konfigurációs objektum mentén halad át, a React objektum Createclass módszerét használja.

 var főinterface = reage.createclass ({
  Render: Funkció () {
    Visszatérés (
      & lt; div osztálynév = "Interface" & gt;
        & lt; addappointment / & gt;
        & lt; searchappointments / & gt;
        & lt; listaappointments / & gt;
      & lt; / div & gt;
    )
  } //Vakol
}); // MainInterface

Reagrestem.render (
  & lt; mainerintface / & gt;
  document.getelementbyid ("petappointments")
); // render 

Két renderelési módszer létezik. A MainInterface osztályban kijelentjük, hogy a böngészőnek és a reagálási módszernek küldendő elemeket kiemeljük, a & lt; div id = "petappointments" & gt; / div & gt; A HTML eleme React kóddal. Ezután írnánk a kódot, amely mindhárom alkatrészünket kezeli.

A komponensek egyszerűen írhatók és karbantarthatnak. Miután megtanulod gondolkodni és megszervezni alkalmazásait, mint egy komponens komponensek sorozatát, az épület komplex alkalmazások egyszerűbbé válnak.

02. JSX

JSX valószínűleg az egyik legnagyobb elme eltolódás, és az egyik oka annak, hogy a könyvtár olyan furcsanak tűnik. A JSX a JavaScript kiterjesztése, amely lehetővé teszi az XML kód kombinációját a JavaScript segítségével.

Ez egyfajta, hogy mi történik a sablonos nyelvekkel, mint a bajusz, amely lehetővé teszi, hogy a JavaScript a HTML-ben. De a JSX-nek a JavaScriptbe történő fordításra kerül. Tehát nem csak sablon építése, hanem olyan struktúra, amely egy sor JavaScript utasításokká alakul. A sablonos nyelvektől eltérően nem kell futásidőben értelmezni. Nézzünk egy példát.

 & lt; li classname = "PET-tétel média" gomb = {index} & gt;
  & lt; div osztálynév = "PET-info média-test" & gt;
    & lt; div osztálynév = "PET-head" & gt;
      & lt; span classname = "PET-name" & gt; {this.state.data [index] .petname} & lt; / span & gt;
      & lt; span classname = "apt-date pull-right" & gt; {this.state.data [index] .aptdate} & lt; / span & gt;
    & lt; / div & gt;
    & lt; div osztálynév = "Tulajdonos-név" & gt; & lt; span classname = "címke-tétel" & gt; tulajdonos: & lt; / span & gt;
    {this.state.data [index] .WowNername} & lt; / div & gt;
    & lt; div osztálynév = "apt-jegyzetek" & gt; {this.state.data [index] .APTNOTES} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

Ezt a kódot a kinevezések kiadására használhatjuk. Ez olyan jól érzi magát, mint a rendszeres sablonos nyelv használatával, így más, mint néhány kisebbségi idioszinkciót tanulni a JSX-ről, gyorsan felveheti.

A JSX használatával kapcsolatos páratlan rész nem tanulja meg magának a nyelvet; Ez átmásolja azt a tényt, hogy a HTML-t a JavaScript-kódba való behelyezése csak úgy tűnik, hogy ... Nos, rossz. De nagyon jó, ha mindenkit egyetlen helyen élő valamennyi komponensnek kell lennie.

03. állam

A harmadik elme váltás az állapotban való reagálással való együttműködés. Az állam az alkalmazás legfelső összetevőjén tárolódik, és kezeli, hogy mi történik az alkalmazásban. Van egy speciális módszer, amelyet Getinitialstate neveznek, ahol beállíthatja, hogy mi történik, ha az alkalmazás elindul.

A mintaalkalmazásban a kezdeti állam így állapítható meg:

 var főinterface = reage.createclass ({
  getinitialstate: funkció () {
    Visszatérés {
      AptBodyVisible: FALSE,
      SURYBY: "PETNAME",
      Sorrenddir: "asc",
      QueryText: ''
    } //Visszatérés
  }, // Getinitialstate 

Úgy tűnik, hogy globális változókat állítok fel az alkalmazásomhoz, de módosítom ezeket a változókat ténylegesen ellenőrzi, hogy a komponensek hogyan renderelnek. Ha az alkalmazásomban valami megváltoztatja a változó értékét, az összetevők újra megjelennek. Ha a megrendelés értéke megváltozik, például a találkozók listája átrendeződik.

Amikor egy alkatrészt írsz, könnyen módosítható az alkalmazás állapota. Az íróelemek könnyebbek, mivel csak arra összpontosít, hogy az összetevő mit csinál. Itt van az App végleges lista összetevője:

 var reakt = szükség (reagálni ");
var aptlist = reage.Createclass ({

  Kézilleték: Funkció () {
    this.props.ondelete (ez.props.whichitem)
  },

  Render: Funkció () {
    Visszatérés(
      & lt; li classname = "PET-tétel média" & gt;
        & lt; div osztálynév = "Media-bal" & gt;
          & lt; Button classname = "PET-delete btn btn-xs btn-veszély" onclick = {this.handledelete} & gt;
          & lt; span classname = "glyphicon glyphicon-remove" & gt; & lt; / span & gt; & lt; / button & gt;
        & lt; / div & gt;
        & lt; div osztálynév = "PET-info média-test" & gt;
          & lt; div osztálynév = "PET-head" & gt;
            & lt; span classname = "PET-name" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; span classname = "apt-date pull-right" & gt; {this.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / div & gt;
          & lt; div osztálynév = "Tulajdonos-név" & gt; & lt; span classname = "címke-tétel" & gt; tulajdonos: & lt; / span & gt;
          {this.props.singleitem.ownername} & lt; / div & gt;
          & lt; div osztálynév = "apt-jegyzetek" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // Visszatérés
  } // Vakol
}); // APTList

modul.exports = APTList; 

Az összetevő csak két dolgot érint. Először is, bemutatva az alkalmazás jelenlegi állapota alapján a találkozók listáját. Másodszor, kezelés egy kattintás az egyik piros 'x.

Az "X" gombra kattintva megváltoztatja az alkalmazás állapotát, ami ezt az összetevőt újra megjeleníti. Nem aggódom, hogy mi történik az adatokkal, egyszerűen az aktuális adatok megjelenítésével.

A lista összetevője csak a dolgok felsorolásával foglalkozik. Nem kell aggódnia, hogy mi történik máshol. Ez egy ragyogó módja az alkalmazások építéséhez, és ha megkapod a lógást, meg fogod látni, hogy miért van kiváló módja a kódnak.

04. Egyirányú adatáramlás

A következő elme eltolódás az, hogy megtanulják szeretni az egyirányú adatáramlást. Reakcióban az alkalmazás állapota a legfelső komponensben található. Ha egy alkatrészben kell változtatnia, akkor hivatkozhat a legfelső összetevőre, és kezelje azt ott. Ez egy kicsit nehéz megszokni. Íme egy példa:

 var reakt = szükség (reagálni ");
var aptlist = reage.Createclass ({
  Kézilleték: Funkció () {
    this.props.ondelete (ez.props.whichitem)
  },
  Render: Funkció () {
    Visszatérés(
      & lt; li classname = "PET-tétel média" & gt;
        & lt; div osztálynév = "Media-bal" & gt;
          & lt; Button classname = "PET-delete btn btn-xs btn-veszély" onclick = {this.handledelete} & gt;
          & lt; span classname = "glyphicon glyphicon-remove" & gt; & lt; / span & gt; & lt; / button & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // Visszatérés
  } // Vakol
}); // APTList

modul.exports = APTList; 

Ez a modul egyszerűsített verziója, amely létrehozza a találkozók listáját. Listánknak van egy törlése gombja, amelyet egy eseménykezelőn keresztül kezelünk. Ez az ONCLICK speciális reakcióverziója. Eseménykezelőnk a kézimunka funkciót használja, amely helyi az almodulhoz. Helyi funkciónk egyszerűen hozzon létre egy másik funkciót egy olyan tárgyú objektumban. A kellékek, hogy a fő modulok kommunikálnak az almodulokkal.

A főmodulban egy attribútumot hoz létre a modul megjelenítéséhez használt címkéhez. Úgy néz ki, mintha egy attribútumot átadna egy HTML-címkéhez:

 & lt; aptlist ondelete = {this.deletemessage} / & gt; 

És akkor létrehozza saját módszerét a fő összetevőben, hogy kezelje az alkalmazás állapotának módosítását. A főmodulban lévő állapot megtartása segít az almodulok hatékonyabbá tételében. Ezenkívül könnyebb fenntartani a kódot, mert a legtöbb cselekvés egy helyen történik.

05. Életciklus módszerek

Az egyik legjobb dolog a reagálásról van szó, hogy kezelje a modulok megjelenítését. A moduloknak nem kell aggódnunk a DOM frissítéséről, csak az alkalmazás állapotára való reagálásról. Ha az állapotváltozások, reagálj újra az alkalmazás összetevőire. Ez azáltal, hogy létrehozza a DOM saját verzióját, amelyet virtuális domnak neveznek.

De néha meg kell tudnod csinálni a dolgokat a renderelés életminőségére. Lépjen be az életciklus módszereibe. Ezek olyan módok, amelyek megkérdezhetik a reagálást, hogy különböző pontokon kezeljék a feladatokat az alkalmazás végrehajtásában.

Vannak, például olyan életfogyatkozási módszerek, amelyek lehetővé teszik, hogy külső adatokat töltsön be AJAX kérésekkel:

 ComponentDIdMount: funkció () {
  ez.Serverrequest = $ .get ('./ js / data.json, funkció (eredmény) {
    var tempapts = Eredmény;
    ez.enstate ({
      MyAppointments: Tempapts
    }); // besestate
  } .bind (ez));
}, // ComponentDIdMount 

Itt a ComponentDIdMount lehetővé teszi, hogy kivégezzen valamit, miután a kezdeti renderelés befejeződött. Ez egy nagyszerű hely az Ajax tartalmának betöltéséhez, az időzítők beállítása és így tovább. Sok olyan életciklus módszer létezik, amelyek lehetővé teszik, hogy a kérelem végrehajtását különböző pontokon. Ezek a reakciók virtuális domja miatt szükségesek, ami az alkalmazások építése során nagy időszűrítő.

Reakció újragondolása

Reagálnak igényel újragondolásával, ahogy dolgozik a webes alkalmazások, de ha összpontosítani mastering előnyeit az öt szem előtt műszakban, akkor gyorsan megtanulják, hogy miért a könyvtár már annyira hihetetlenül népszerű, és egy fantasztikus módja annak, hogy épít interfészeket.

Ez a cikk - mutatjuk Ray Villalobos - eredetileg számában 286 nettó, a világ legkelendőbb magazin a webes tervezők és fejlesztők számára. Feliratkozás a netre .

Szeretne tovább finomítani a reagálási készségeket?

Ha érdekel többet a reagálásról, győződjön meg róla, hogy felvette a jegyét London létrehozása 2018. szeptember 19-21-től . A React Akadémia megalapítása, hogy tanítsa a világ minden tájáról és elindította sizzy.co és ok-google.io , Kristijan Ristovski lesz nyilvánított a workshop - Megtanulják, hogyan Gondolj reagál -, amelyben feltárja reagálnak a legjobb gyakorlatokat, és megtanít megoldásokat a valós problémákat, hogy lehet, hogy találkozik a folyamat az épület egy kb.

London létrehozása 2018. szeptember 19-21. Most kapd meg jegyét .

Kapcsolódó cikkek:

• 10 szakértői reaktív tippeket, amelyeket ma kell tudnia
• Hozzon létre egy műszerfal-alkalmazást reagálással
• Építsen egy egyszerű zenelejátszót reagálva