Dostaňte svou hlavu kolem reakce s těmito pěti faktory

Sep 11, 2025

jak

Učení Reagovat, JavaScript knihovna pro vytváření uživatelských rozhraní z Facebooku a Instagramu se jeví jako ořechy, dokud to nedáte šanci. Věci se mnohem snazší, když chápete pět klíčových pojmů. Zavolám těm, že pět změn mysli. Jsou to: komponenty, JSX, stav, metody životního cyklu a jednosměrný tok dat.

01. Komponenty

Komponenty jsou kousky kódu, které lze kombinovat tak, aby poskytoval složitější funkčnost. Když rozdělíte aplikaci do komponent, usnadňuje aktualizaci a údržbu. V reakci, komponenty jsou ještě důležitější: neprovádíte je jen je naprogramovat, navrhujete aplikaci tím, že přemýšlíte o tom, jak tyto komponenty zapadají dohromady.

Podívejme se níže jako příklad rozhraní. Můžete vidět, jak lze rozdělit na tři kusy: krabici pro rezervaci nové schůzky, zobrazení seznamu, který vám umožní zobrazit stávající události a vyhledávací pole pro prohlížení přes ně.

An image showing how easy it is the structure an app into reusable components. — Můžete snadno vidět, jak strukturovat tuto aplikaci do opakovaně použitelných komponent

V HTML, můžete si myslet na tuto aplikaci jako série prvků, jako je tento:

 & lt, div id = "petAppointments" & gt;
  & lt; dig class = "addappointments" & gt; & lt; / div & gt;
  & lt; Div Class = "Searchappoints" & gt; & lt; / div & gt;
  & lt, divové třídy = "listappointments" & gt; & lt; / div & gt;
& lt; / div & gt;

A to je také to, co byste dělali v reakci. Vytvoříte jednu značku (

 Var MainInterface = Reage.CreateClass ({
  Vykreslení: Funkce () {
    vrátit se (
      & lt, div classname = "rozhraní" & gt;

Existují dva metody vykreslení. Ve třídě MainInterface deklarujeme položky, které budou odeslány do prohlížeče a metoda Reactdom.Render nahrazuje. prvek v HTML s reakcím kódem. Pak bychom napsali kód, který zpracovává každý z našich tří dílčích komponentů.

Komponenty dělají kód snadno psát a udržovat. Jakmile se naučíte myslet a zorganizovat vaše aplikace jako série kompatibilních komponent, stavební komplexní aplikace se stává jednodušší.

02. JSX.

JSX. Je pravděpodobně jeden z největších změn, a jeden z důvodů, proč se knihovna zdá být tak divný. JSX je rozšířením do JavaScriptu, který umožňuje kombinovat XML kód s JavaScriptem.

To je druh, co se děje s templomatickými jazyky, jako je knír, který vám umožní zahrnout JavaScript v HTML. Ale JSX dostane přeložen (transpiled) do JavaScriptu. Takže nejste jen budování šablony, ale strukturu, která se převede na řadu výroků JavaScriptu. Na rozdíl od šablonářských jazyků nemusí být vykládána v runtime. Podívejme se příkladem.

 & lt, li classname = "pet-item média" klíč = {index} & gt;
  & lt; dig classname = "pet-info media-tělo" & gt;
    & lt, div knowname = "pet-head" & gt;
      & lt, span classname = "pet-name" & gt; {tento.state.data [index] .PetName} & lt; / rozpětí & gt;
      & lt, span classname = "apt-date pull-vpravo" & gt; {this.state.data [index] r .apdate}.
    & lt; / div & gt;
    & lt; dig classname = "vlastníka-name" & gt; & lt; span classname = "label-item" & gt; majitel:
    {this.state.data [index] .ownernname} & lt; / div & gt;
    & lt; dig classname = "apt-poznámky" & gt; {this.state.data [index] r .aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt;

Tento kód můžeme použít k výstupu našich schůzek. To se cítí hodně jako používat pravidelný šablonářský jazyk, tak jiný než učení několika drobných idiosyncrází o JSX, můžete rychle vyzvednout.

Podivná část o použití JSX se neučí samotný jazyk; Je to dostat k tomu, že uvedení HTML v rámci kódu JavaScriptu se zdá, že ... dobře, špatně. Ale je to opravdu hezké mít veškerý kód pro každou součást žijící na jednom místě.

03. State.

An image displaying the user clicking on a red X – which is captured at the component level. — Kliknutím na jeden z červených XS je zachycen na úrovni komponent, ale odkazuje na metodu v hlavní složce rekvizit

Třetí směna mysli se učí pracovat se státem v reakci. Stát je uložen na nejvyšší složce vaší aplikace a spravuje to, co se děje ve vaší aplikaci. Existuje speciální metoda zvaná GetInitialState, kde můžete konfigurovat, co se stane, když se vaše aplikace spustí.

V mé ukázkové aplikaci je výchozí stav nastaven takto:

 Var MainInterface = Reage.CreateClass ({
  GetIntitialState: Funkce () {
    vrátit se {
      aptebodyvisible: false,
      objednávka: "petname",
      OrderDir: 'ASC',
      QueryText: ''
    } //vrátit se
  }, // GetInitialState

Vypadá to, že zřídím globální proměnné pro mou aplikaci, ale upravujeme tyto proměnné ve skutečnosti kontroluje, jak komponenty vykreslují. Pokud něco v mé aplikaci změní hodnotu proměnné, mé komponenty budou znovu vykresleny. Pokud se hodnota objednávek změní například seznam schůzek.

Když píšete komponentu, je snadné upravit stav aplikace. Psaní komponentů je snazší, protože jste se zaměřili jen na to, co komponenta dělá. Zde je finální seznam mé aplikace:

 var reagovat = požadovat ("reagovat");
var aptlist = reaght.createClass ({

  Pandledelete: Funkce () {
    This.props.ondelete (this.props.whichItem)
  },

  Vykreslení: Funkce () {
    vrátit se(
      & lt, li classname = "pet-item média" & gt;
        & lt; dig classname = "Media-levice" & gt;
          & lt; tlačítko classname = "pet-delete btn btn-xs btn-nebezpečí" onclick = {this.handledelete} & gt;
          & lt, span classname = "glyficon glyficon-remining" & gt; & lt; / rozpětí & gt; & lt; / tlačítko & gt;
        & lt; / div & gt;
        & lt; dig classname = "pet-info media-tělo" & gt;
          & lt, div knowname = "pet-head" & gt;
            & lt, span classname = "pet-jméno" & gt; {this.props.singleitem.petname} & lt; / rozpětí & gt;
            & lt, span classname = "apt-date pull-vpravo" & gt; {this.props.singleitem.aptdate} & lt; / rozpětí & gt;
          & lt; / div & gt;
          & lt; dig classname = "vlastníka-name" & gt; & lt; span classname = "label-item" & gt; majitel:
          {This.props.singleitem.wnernname} & lt; / div & gt;
          & lt; dig classname = "apt-poznámky" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // vrátit se
  } // poskytnout
}); // aptlist.

modul.exports = aptlist;

Komponenta se zabývá pouze dvěma věcmi. Za prvé, zobrazující seznam schůzek založených na aktuálním stavu žádosti. Za druhé, manipulace s kliknutím na jeden z červených 'x.

Kliknutím na 'x' stiskne změnu stavu aplikace, což způsobuje, že tato komponenta znovu vykreslit. Nemám strach o tom, co se děje s daty, jednoduše s tím, jak se zobrazí aktuální data.

Seznam komponenty se zabývá pouze výpisem. Nemusí se starat o to, co se děje jinde. Je to skvělý způsob, jak vytvořit aplikace a jakmile dostanete viset z toho, uvidíte, proč je to vynikající způsob, jak kódovat.

04. Jednosměrný tok dat

An image showing the user inputting information into a search component, demonstrating how React will re-render specific data on the go. — Zde se vyhledávací složka zabývá pouze změnou stavu dat. Seznam bude znovu vykreslen s novými údaji o letu

Dalším posunem mysli je naučit se milovat jednosměrný tok dat. V reakci se stav vaší aplikace sídlí v nejvyšší složce. Pokud je třeba jej změnit v dílčí komponentu, vytvoříte odkaz na nejvyšší komponentu a zvládněte jej tam. To je trochu těžké zvyknout si. Zde je příklad:

 var reagovat = požadovat ("reagovat");
var aptlist = reaght.createClass ({
  Pandledelete: Funkce () {
    This.props.ondelete (this.props.whichItem)
  },
  Vykreslení: Funkce () {
    vrátit se(
      & lt, li classname = "pet-item média" & gt;
        & lt; dig classname = "Media-levice" & gt;
          & lt; tlačítko classname = "pet-delete btn btn-xs btn-nebezpečí" onclick = {this.handledelete} & gt;
          & lt, span classname = "glyficon glyficon-remining" & gt; & lt; / rozpětí & gt; & lt; / tlačítko & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // vrátit se
  } // poskytnout
}); // aptlist.

modul.exports = aptlist;

Jedná se o zjednodušenou verzi modulu, který vytváří seznam schůzek. Náš seznam má tlačítko Odstranit, které zvládáme prostřednictvím obslužného programu události. Jedná se o speciální reakcí verzi onClick. Naše obslužný program událostí volá funkci Handledelete, která je lokální pro dílčí modul. Naše místní funkce jednoduše vytvoří odkaz na jinou funkci v objektu nazvaný rekvizity. Rekvizity jsou, jak hlavní moduly komunikovat s dílčí moduly.

V hlavním modulu vytvoříte atribut na značku, kterou používáte pro reprezentaci modulu. Vypadá to jako předávání atributu na značku HTML:

 & lt; aptlist Ondelete = {This.Detemessage} / & gt;

A pak vytvoříte vlastní metodu v hlavní složce, chcete-li zvládnout změnu stavu aplikace. Udržování stavu v hlavním modulu pomáhá vytvářet vaše dílčí moduly efektivnější. Je také snazší udržovat kód, protože většina akce se děje na jednom místě.

05. Metody životního cyklu

Jednou z nejlepších věcí o reakci je způsob, jakým řídí vykreslování vašich modulů. Vaše moduly se nemusí starat o aktualizaci DOM, pouze o reakci na stav vaší aplikace. Když se změní stav, reaguje re-vykresluje komponenty vaší aplikace. To dělá tím, že vytvoří svou vlastní verzi DOM volal virtuální dom.

Ale někdy musíte být schopni dělat věci v reakci na vykreslování životního prostředí. Zadejte metody životního cyklu. Jedná se o způsoby, jak požádat o reakci na zpracování úkolů v různých bodech v provedení aplikace.

Existují například metody životního stylu, které vám umožní načíst externí data prostřednictvím požadavků AJAX:

 ComponentDidMount: Funkce () {
  This.ServerRequest = $ .get ('./ JS / Data.json', funkce (výsledek) {
    var Tempapts = výsledek;
    Tento.Setstate ({
      MyAppointments: Tempapts.
    }); // setState.
  } .Bind (toto));
}, // ComponentDidMount

ComponentDidMount vám umožní provést něco po dokončení počátečního vykreslování. To je skvělé místo pro naložení obsahu AJAX, nastavit časovače a tak dále. Existuje spousta dalších metod životního cyklu, které vám umožní zachycení provádění aplikace v různých bodech. Jsou nezbytné, protože reagovat virtuální dom, což je skvělé časování při budování aplikací.

Přehodnocení reaguje

Reagovat vyžaduje přehodnocení způsobu, jakým pracujete s webovými aplikacemi, ale pokud se zaměřujete na zvládnutí výhod těchto pěti změn, budete se rychle dozvědět, proč se knihovna stala tak neuvěřitelně populárně a je fantastický způsob, jak budovat rozhraní.

Tento článek - ilustrovaný Ray Villalobos - byl původně publikován v čísle 286 sítě, světového časopisu nejprodávanějšího světa pro web designéry a vývojáře. Přihlásit se k odběru Net. .

Chcete dále zdokonalit své reakční dovednosti?

Image with the details on Kristijan Ristovski’s workshop – Learn How to Think in React – at Generate London on 19-21 September 2018. — Kristijan Ristovski dává jeho workshopu naučit se, jak přemýšlet v reakci na Generovat Londýn od 19. do 21. září 2018

Máte-li zájem o další informace o reakci, ujistěte se, že jste zvedli jízdenku Generovat Londýn od 19. do 21. září 2018 . Po založení Reage Academy učit reagovat po celém světě a spuštěn Sizy.co. a OK-GOOGLE.IO. , Kristijan Ristovski bude dodávat svůj workshop - naučit se, jak si myslet v reakci - ve kterém on bude zkoumat reagovat osvědčené postupy a naučit vás řešení skutečných problémů, které byste mohli setkat v procesu budování aplikace.

Generovat Londýn se koná od 19. do 21. září 2018. Dostaňte svou letenku .

Související články:

10 Expert Reactjs tipy, které potřebujete vědět dnes
Vytvořte aplikaci Dashboard s Reagem
Vybudovat jednoduchý hudební přehrávač s reakcí

Dostaňte svou hlavu kolem reakce s těmito pěti faktory

01. Komponenty

02. JSX.

03. State.

04. Jednosměrný tok dat

05. Metody životního cyklu

Přehodnocení reaguje

Chcete dále zdokonalit své reakční dovednosti?

jak - Nejoblíbenější články

Smíšené mediální výukový program: Jak akvarel nad digitální umělecká díla

Tipy vizuálního vývoje: Řekněte příběh s vaší kresbou

8 Zlatá pravidla mobilního designu

Obnovte manga classic

Afinitní návrhář: Jak používat export Persona

Jak navrhnout věrohodné fantasy bestie

Jak udělat MandelBulb

Scatter stromy s v-ray

Kategorie