Reakta pieci nāves pirksti. Apgūstiet šos piecus jēdzienus, tad apgūstiet Reakciju.

Pirms dažiem gadiem mans draugs Šons man sāka stāstīt, kā šī pavisam jaunā front-end bibliotēka ar nosaukumu React pārņems tīmekli. Sākumā es to noraidīju kā kārtējo ietaisi. Bet tad es sāku dzirdēt par React arvien vairāk, līdz brīdim, kad man šķita, ka to ignorēt, vairs nebija izvēles.

Varbūt jūs atrodaties tajā pašā pozīcijā, kurā biju es: jūs esat dzirdējuši par React pa kreisi un pa labi, bet patiesībā sēžot un mācoties, tas jūtas kā tāds darbs.

Labā ziņa ir tā, ka jūs varat vārīt visu, kas jums jāzina par Reaģējiet līdz pieciem galvenajiem jēdzieniem .

Tagad nepārprotiet, tas nenozīmē, ka es jūs uzreiz varu pārvērst par React meistaru. Bet vismaz jūs sapratīsit visus galvenos jēdzienus, ja tomēr nolemjat ielēkt.

Pieci galvenie jēdzieni ir:

  1. Komponenti
  2. JSX
  3. Rekvizīti un štats
  4. Komponenta API
  5. Komponentu veidi

Pirms mēs sākam, ņemiet vērā, ka es sākotnēji mācījos React, izmantojot Wes Bos kursus, un esmu pievienojis dažas saistītās saites uz tiem. Kad vien iespējams, esmu iekļāvis arī saites uz bezmaksas resursiem.

Ak, un mans draugs Šons? Kopš tā laika viņš ir pārcēlies uz daudz modernākām lietām. Galu galā, React ir tik 2015. gads.

1. koncepcija: Kā darbojas React komponenti

Pirmā lieta, kas jums jāzina par React, ir tā, ka viss ir saistīts ar komponentiem . Jūsu React koda bāze būtībā ir tikai viena liela kaudze lielu komponentu, kas sauc mazākus komponentus.

Bet kāda ir sastāvdaļa, jūs jautājat? Ideāls komponenta piemērs ir kopīgais ct> HTML element. Not only does it come with its own visual output (the grey box, text label, and downward arrow that make up the element itself) — it also handles its own opening and closing logic.

Now imagine being able to build your own self-contained custom ct>, with its own style and behavior:

Well, that’s exactly what React lets you do. A React component is a single object that not only outputs HTML like a traditional template would, but also includes all the code needed to control that output.

In practice, the most common way to write React components is as an ES6 class containing a render method that returns HTML. (There’s also a super-secret functional way, but you’ll have to wait until concept #4 to learn about it):

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

2. koncepcija: kā darbojas JSX

Kā redzat, komponentu pieeja nozīmē, ka gan HTML, gan JavaScript kods dzīvo vienā failā. React slepenais ierocis, lai panāktu šo nesvēto aliansi, ir JSX valoda (kur “X” apzīmē “XML”).

Sākumā JSX var šķist neērts, taču jūs pie tā pierodat diezgan ātri.

Jā, es zinu. Mums visiem ir iemācīts stingri nošķirt HTML un JavaScript. Bet izrādās, ka šo noteikumu mazliet atslābināšana faktiski var radīt brīnumus jūsu priekšgala produktivitātei.

Piemēram, tā kā jūsu rīcībā tagad ir pilna Java jauda, ​​lūk, kā jūs varat parādīt pašreizējo datumu, ievietojot JavaScript fragmentu savā HTML, izmantojot {...}:

class MyComponent extends React.Component {
 render() { return 

Today is: {new Date()}

; }
}

Tas arī nozīmē, ka ifpriekšrakstiem vai cilpām izmantosiet vienkāršu JavaScript , nevis kaut kādu veidnei raksturīgu sintaksi. Šeit īpaši noderīgs ir JavaScript trīsdaļīgais operators:

class MyComponent extends React.Component {
 render() { return 

Hello {this.props.someVar ? 'World' : 'Kitty'}

; }
}

Un, starp citu, ja jums ir jāpievērš uzmanība jaunākajiem JavaScript sintakses punktiem, es iesaku Wes Bos ES6 visiem (ja jums patīk videoklipi) vai Nicolas Bevacqua praktisko ES6 (ja vēlaties lasīt).

3. koncepcija: Kā darbojas Rekvizīti un valsts

Varbūt jūs esat domājis, no kurienes this.props.someVarnāk iepriekš minētais mainīgais.

Ja esat kādreiz uzrakstījis HTML rindu, jūs, iespējams, pārzināt tādus HTML atribūtus kā <; a> tag’s href. Programmā React atribūti ir kno wn kā rekvizīti (saīsinājums no “īpašības”). Atbalsti ir tas, kā komponenti runā viens ar otru.

class ParentComponent extends React.Component {
 render() { return ; }
}
class ChildComponent extends React.Component {
 render() { return 

And then I said, “{this.props.message}”

; }
}

Tāpēc React datu plūsma ir vienvirziena : dati no vecākiem komponentiem var pāriet tikai uz bērniem, nevis otrādi.

Dažreiz, lai gan, sastāvdaļa vajadzības, lai reaģētu uz datiem, kas nav nāk no mātes sastāvdaļas (piemēram, lietotāja ievadi, piemēram). Un šeit ienāk valsts .

Laba metafora, lai saprastu atšķirību starp rekvizītiem un stāvokli, būtu Etch-A-Sketch. Atšķirībā no tādām lietām kā Etch-A-Sketch planšetdatora korpusa krāsa un ciparnīcas pozīcija ( rekvizīti ), pats zīmējums ( stāvoklis ) nav Etch-A-Sketch raksturīgs īpašums. Tas ir tikai īslaicīgs lietotāja ievades rezultāts.

Ņemiet vērā, ka komponenta stāvokli var nodot arī saviem bērniem kā rekvizītu . Jūs to varat uzskatīt par lielu upi, kas plūst lejup, un maršrutētājs, datu slānis un dažādi komponenti katrs pievieno savu mazo datu plūsmu, lai izveidotu galveno lietotnes stāvokli.

Komponenta iekšienē stāvoklis tiek pārvaldīts, izmantojot setStatefunkciju, kuru bieži sauc par notikumu apstrādātāju:

class MyComponent extends React.Component {
 handleClick = (e) => { this.setState({clicked: true}); }
 render() { return Click me; }
}

Praksē lielākā daļa React lietotnes datu būs rekvizīti . Tikai tad, kad jums jāpieņem lietotāja ievadītie vārdi, jūs izmantosiet stāvokli, lai veiktu izmaiņas.

Ņemiet vērā, ka šeit mēs izmantojam tauku bultiņu, lai rūpētos par handleClickapdarinātāja iesiešanu . Jūs varat uzzināt vairāk par šo tehniku ​​šeit.

4. koncepcija: kā darbojas komponenta API

Mēs jau esam minējuši renderun setStatekas ir daļa no neliela komponentu API metožu komplekta. Vēl viens noderīgs ir tas constructor, kuru varat izmantot, lai inicializētu stāvokli un saistīšanas metodes.

Papildus šīm trim funkcijām, React nodrošina arī atzvanīšanas komplektu, kas tiek aktivizēts dažādos punktos komponenta dzīves cikla laikā (pirms iekraušanas, pēc iekraušanas, pēc atvienošanas utt.). Ja vien jūs nedarāt kādu uzlabotu React voodoo, jums, iespējams, gandrīz nekad nebūs jāuztraucas par šiem.

Ja šī sadaļa šķiet īsa, tas ir tāpēc, ka React mācīšanās patiesībā ir daudz vairāk saistīta ar programmēšanas un arhitektūras koncepciju apgūšanu, nevis garlaicīgu API metožu kopuma apgūšanu. Tas padara to tik atsvaidzinošu!

5. koncepcija: kā darbojas komponentu tipi

Mēs esam redzējuši, kā izmantot klases, lai definētu komponentu:

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

Un mēs esam runājuši arī par komponentu metodēm, kuras atbalsta šīs klases. Tagad aizmirstiet visu par viņiem! Arvien vairāk cilvēki React komponentus raksta kā funkcionālos komponentus .

Funkcionālā sastāvdaļa ir funkcija, kas propsobjektu uzskata par argumentu un atgriež HTML kopu. Gandrīz kā tradicionālā veidne, ar galveno atšķirību, ka šajā funkcijā joprojām varat izmantot jebkuru nepieciešamo JavaScript kodu:

const myComponent = props => {
 return 

Hello {props.name}! Today is {new Date()}.

}

Funkcionālo komponentu sintakses izmantošanas sekas ir tādas, ka jūs zaudējat piekļuvi komponentu metodēm, par kurām mēs tikko runājām. Bet izrādās, ka praksē tas ir pilnīgi labi, jo lielākajai daļai jūsu komponentu tie, iespējams, nebūs vajadzīgi.

Starp citu, viena no šīm metodēm ir setState, un tas nozīmē, ka funkcionālajiem komponentiem nevar būt stāvoklis. Šī iemesla dēļ tos bieži sauc par funkcionāliem bezvalstniekiem .

Tā kā funkcionālajiem komponentiem ir nepieciešams daudz mazāk katlu kodu, ir lietderīgi tos izmantot, kad vien iespējams. Šī iemesla dēļ lielākā daļa React lietotņu satur veselīgu abu sintakse sajaukumu.

Ņemiet vērā, ka ir arī trešā mantotā sintakse, izmantojot šo createClassfunkciju. Bet ikviens, kas to lieto, ir jākaunas un jāsauc par vārdiem, kas uzdrošinās joprojām izmantot kodēšanas modeļus pirms 18 mēnešiem:

var Greeting = React.createClass({ render: function() { return 

Hello, {this.props.name}

; }
});

6. koncepcija: kā darbojas komponentu lomas

Labi, es meloju. Faktiski ir sešas lietas, nevis piecas. Bet ko es varu teikt, ka filma netiek saukta par “Nāves sešiem pirkstiem”. Lai gan tagad, kad es par to domāju, izklausās, ka tā būtu diezgan forša filma, kurā, iespējams, iesaistīts kaut kāds svešzemju kung-fu meistars, kurš cenšas atriebties.

Bet, atgriežoties pie apskatītās tēmas. Tagad nāk garlaicīgi arhitektūras jēdzieni, par kuriem es runāju. Tāpēc, ja nevienam no šiem jēgas nav nekādas jēgas, nekautrējieties atgriezties, kad jums ir bijusi iespēja spēlēt vēl ar React.

Pēc tam, kad kādu laiku esat lietojis React, cilvēki sāka redzēt divus atšķirīgus koda “aromātus”: viens aromāts bija saistīts ar lietotāja saskarnes loģiku, piemēram, lietas parādīšanu un slēpšanu. Un otrs bija par datu loģiku, piemēram, datu ielādi no jūsu servera.

Tas noveda pie konteinera un prezentācijas komponentu atšķirības (tos dažkārt dēvē arī par “ viedajiem ” un “ mēmajiem ” komponentiem). Konteinera komponentiem vajadzētu apstrādāt jūsu datus, bet - un tā ir svarīgā daļa - nevis jūsu lietotāja saskarne. Prezentācijas komponenti ir tieši pretēji.

Citiem vārdiem sakot, klasisko uzdevumu saraksta piemērā viens komponents ielādēs datus un pēc tam pārsūtīs tos citam komponentam, kas būs atbildīgs par faktiskā HTML marķējuma izdošanu un vietējo stāvokļu izmaiņu apstrādi.

Tas ir ļoti līdzīgs skata / kontrollera modelim, kas jums varētu būt pazīstams no jūsu aizmugures izstrādātāju dienām. ( 'biedrs Rails?' biedrs Django? )

Konteinera / prezentācijas atšķirību šajā emuāra ziņā popularizēja Dens Abramovs (Redux veidotājs), un es iesaku to pārbaudīt, ja vēlaties iedziļināties.

Augstāka pasūtījuma komponenti

Pirms mēs iesaiņojam lietas, mums vajadzētu mazliet runāt par konteineru komponentu tipu, kas pazīstams kā augstākas pakāpes komponenti (bieži saīsināti kā HoC).

HoC ir komponents, kuru varat aptīt ap citu komponentu, lai tam nodotu īpašus balstus, un tas parasti tiek izveidots, izmantojot augstākas pakāpes komponentu rūpnīcas funkciju . Ņemiet vērā, ka cilvēki parasti pašu funkciju dēvē par “HoC”, kas tehniski, iespējams, nav 100% pareiza, taču praksē tā nav liela problēma.

Piemēram, ieslēdzot React Router withRouterrūpnīcas funkciju nt>will wrap it in a new ponent)/> component that passes the Router prop to the afor e-mentioned &lt;MyComponent>.

You can think of a HoC function as a golf caddie that follows their golfer around and hands them the club they need it. By themselves, the caddie can’t actually do anything with the golf clubs. They’re just there to give the golfer access to more tools.

HoCs are a very powerful concept. For example, the Recompose library even lets you handle state changes through HoCs. In other words, you can now manage state without having to involve any ES6 class-based components.

With HoC composition becoming so common, it seems like React might be moving away from the ES6 class syntax and more towards a purely functional approach. Interesting times!

Recap

So let’s recap what we’ve just learned:

  • A React codebase is made up of components.
  • These components are written using JSX.
  • Data flows from parent to children, except when it comes to state, which originates inside a component.
  • Components possess a small set of lifecycle and utility methods.
  • Components can also be written as pure functions.
  • You should keep data logic and UI logic in separate components.
  • Higher-order components are a common pattern for giving a component access to new tools.

Believe it or not, we’ve just covered 90% of the knowledge used by a React developer on a daily basis. No matter how abstract or obscure the pattern, everything in React can always be boiled down to functions and props.

Once you truly understand this, React will stop being scary. You’ll be able to see patterns in the code, understand new codebases at a glance, and only then will you be able to proudly proclaim:

“Pfff! React is so 2015!”

Going Further

If I’ve managed to convince you that React isn’t so bad, you might want to take a stab at learning it properly. If so, I can’t recommend the React for Beginners video course enough. It’s how I learned React myself, and it’s actually just been updated to cover all the cool new stuff like functional stateless components:

If you don’t want your hard-earned dollars to finance the nefarious React lobby (I heard Dan Abramov is onto his third yacht), you can also learn for free by checking out this huge list of React resources.

And if you need to put all this newly-acquired knowledge in practice by contributing to a cool React open-source project, check out Telescope Nova. It’s the easiest way to quickly create a full-stack React + GraphQL app, complete with user accounts, forms, and data loading out of the box. And did I mention we’re looking for contributors?

Finally, if you’ve enjoyed this article, please share it and recommend it (that little green heart just below). And please let me know on Twitter what you’d like me to write about next!