React: JSX komponentu un elementu skaidrojums

Šajā brīdī jums var rasties jautājums, kā definēt, kas patiesībā ir JSX. Un var nebūt pilnīgi skaidrs, kā React darbojas ar JSX, lai aprakstītu lietotāja interfeisu un izveidotu lietotājam draudzīgu un efektīvu lietotni. Nu, izpētīsim šos jēdzienus mazliet sīkāk.

Šajā rakstā jūs uzzināsiet,

• kā React izmanto JSX, lai aprakstītu lietotāja interfeisu,
• atšķirības starp komponentiem un elementiem un vispārīgajiem jēdzieniem,
• kas ir pamatā React deklaratīvajam modelim.

Pieņemsim, ka restorāna īpašnieki jau ilgu laiku ir apmierināti ar savu oriģinālo vietni. Taču, tā kā uzņēmums ir attīstījies, viņi tagad vēlas pievienot vairāk funkciju, funkcionalitātes, analītikas un lietotāju interaktivitātes. Viņi ievēro, ka sākotnējā vietne tika izveidota tādā veidā, kas nozīmē, ka šāda veida uzlabojumiem ir daudz ierobežojumu. Pēc padoma meklēšanas viņi ir secinājuši, ka viņiem vajadzētu izstrādāt lietotni, izmantojot JSX un React. Viņi vēlas uzzināt vairāk par JSX un React, lai viņi varētu savā biznesa plānā iekļaut pamatojumu.

Sāksim ar JSX skaidrojumu.

JSX ir JavaScript sintakses paplašinājums, ko React izmanto, lai aprakstītu lietotāja saskarni. Tomēr, lai gan JSX izskatās kā HTML, tā būtībā ir jaudīgāka abstrakcija, kas apvieno gan iezīmēšanu, gan biznesa loģiku savienībā, ko sauc par komponentu. Tātad, kas patiesībā notiek no brīža, kad savā renderēšanas funkcijā ierakstāt JSX, līdz brīdim, kad Reacts izveido vēlamos līdzekļus jūsu lapām?

Lai saprastu visas iesaistītās darbības, jums jāiepazīstas ar elementu jēdzienu programmā React.

Ja esat nonākuši līdz šim rakstam, tad visdrīzāk jums jau ir laba izpratne par komponentiem un to, kā visu jūsu lietotāja interfeisu attēlo komponentu koks. Visdrīzāk Jūs arī zināt, ka pēdējās tīmekļa lapas, ko izstrādā React, ir nekas cits kā tīrs HTML, CSS un JavaScript. Kad React analizē jūsu renderēšanas metodes no visiem jūsu komponentiem, tas ņem visu JSX koku, sākot no saknes, un izveido starpposma attēlojumu.

Koda piemērs ieskatam:

const pogasNosaukums = 'Sūtīt';


return (
  <button className = 'button button-blue'>
    <span>
      {pogasNosaukums}
    </span>
  </button>
)

Šis attēlojums būtībā ir cits koks, kas līdzīgs iepriekšējam, taču katrs mezgls, nevis JSX, ir vienkāršs objekts, kas apraksta komponenta gadījumu vai DOM mezglu un tā vēlamās īpašības. Šis plaknes objekts ir tas, ko React definē kā elementu.

Koda piemērs ieskatam:

{


  type: 'button',


    props: {


    className: 'button button-blue',


      children: {


      type: 'span',


        children: 'Sūtīt'


    }


  }


}

Elements ir tikai veids, kā attēlot galīgo HTML izvadi kā vienkāršu objektu. Tas galvenokārt sastāv no diviem atribūtiem, type un props (jeb: tips un rekvizīti). Tips nosaka mezgla veidu, piemēram, pogu, un rekvizīti ietver visas īpašības, ko komponents saņem vienā objektā. Ievērojiet, kā elementus var ligzdot, kā parādīts pogas piemērā, izmantojot bērnu īpašumu. Kad React izveido visu elementu koku, sākot no saknes, saknes elements norāda visus pakārtotos elementus kā bērnu atbalstu. Un katrs bērna elements dara to pašu, līdz sasniedz koka galu. Šajā jaunajā struktūrā svarīgi ir tas, ka gan bērnu, gan vecāku elementi ir tikai apraksti, nevis faktiskie gadījumi.

Citiem vārdiem sakot, tie neatsaucas uz neko ekrānā, kad tos veidojat, galu galā tie ir tikai objekti. Taču šos objektus ir viegli šķērsot, un tie, protams, ir vienkāršāki nekā faktiskie DOM elementi. Līdz šim jūs esat iepazīstināts ar koka transformācijas piemēru ar vienkāršiem DOM mezgliem, piemēram, pogu. Elementu kokā tas ir norādīts kā type property (tipa rekvizīts), bet elementa tips var būt arī funkcija, kas atbilst React komponentam.

{

type: SubmitButton,

props: {

color: 'blue',

children: 'Iesniegt'

}

}

Iedomājieties, ka esat izveidojis komponentu tradicionālās HTML pogas iekapsulēšanai ar nosaukumu Iesniegt. Šajā gadījumā elementa tipa rekvizīts norādīs uz komponenta nosaukumu. Šī ir React pamatideja, gan lietotāja definētos komponentus, gan DOM mezglus var ligzdot un sajaukt savā starpā elementārā.

Piemēram, ja veidojat “Log-out” atteikšanās procesu lietotnei, varat to izdarīt, izmantojot JSX atteikšanās komponentu.

const Logout = () => (

<div>

<p>Vai esi drošs?</p>

<SubmitButton

color="blue">Jā</SubmitButton>

</div>

);

Šajā atteikšanās komponentā JSX tiks tulkots uz šādu elementu koku:

{


  type: "div",


    props: {


    children: [


      {


        type: "p",


        props: {


          children: "Vai esi drošs?",


        },


      },


      {


        type: SubmitButton,


        props: {


          color: "blue",


          children: "Yes",


        },


      },


    ],
 
  },


},