Componentele funcției și clasei, elementele de recuzită, starea și gestionarea evenimentelor React

Cum sa scrieti prima componenta Reactjs

Actualizați: Acest articol face acum parte din cartea mea „React.js Beyond The Basics”.

Citiți versiunea actualizată a acestui conținut și mai multe despre React at jscomplete.com/react-beyond-basics.

Cel mai important concept de înțeles în React.js este componenta. O componentă React poate fi una din două tipuri. Poate fi fie a funcţie componentă sau a clasă componentă. Uneori veți auzi termeni diferiți pentru a descrie aceste două tipuri, cum ar fi Fara stare și starea de stat. Componentele funcționale sunt, de asemenea, adesea asociate cu de prezentare concept. Mă voi referi la ele în acest articol ca componente ale funcției și componente ale clasei.

O componentă funcțională este cea mai simplă formă a unei componente React. Este o funcție simplă cu un contract simplu:

1612059549 666 Cum sa scrieti prima componenta Reactjs
Captură de ecran capturată din cursul meu Pluralsight – React.js: Noțiuni introductive

Componenta funcției primește un obiect de proprietăți care este denumit de obicei recuzită. Revine ceea ce arată ca HTML, dar este într-adevăr o sintaxă specială JavaScript numită JSX.

A componenta clasei este un mod mai prezentat de a defini o componentă React. De asemenea, acționează ca o funcție care primește recuzită, dar această funcție consideră, de asemenea, o stare internă privată ca intrare suplimentară care controlează JSX-ul returnat.

1612059549 581 Cum sa scrieti prima componenta Reactjs
Captură de ecran capturată din cursul meu Pluralsight – React.js: Noțiuni introductive

Acest stat intern privat este ceea ce dă React lui reactiv natură. Când starea unei componente de clasă se modifică, React va reda din nou acea componentă în browser.

Obiectele State și Obiecte au o diferență importantă. În interiorul unei componente de clasă, obiectul State poate fi schimbat în timp ce obiectul Props reprezintă valori fixe. Componentele clasei își pot schimba doar starea internă, nu proprietățile. Aceasta este o idee de bază de înțeles în React și acest articol va avea un exemplu în acest sens.

ad-banner

Să vedem un exemplu real de componentă. Una foarte simplă, fără nicio intrare și cu una simplă h1 într-o div ieșire.

1612059550 778 Cum sa scrieti prima componenta Reactjs
Captură de ecran capturată din cursul meu Pluralsight – React.js: Noțiuni introductive

În partea stângă, componenta este scrisă în sintaxa specială JSX.

JSX ne permite să descriem interfețele utilizatorului (UI) într-o sintaxă foarte apropiată de HTML cu care suntem obișnuiți. Cu toate acestea, este opțional. React poate fi utilizat fără JSX, după cum puteți vedea în partea dreaptă. De fapt, React tocmai compilează JSX-ul pe care îl vedeți în stânga în JavaScript pur pe care îl vedeți în dreapta. Apoi funcționează cu JavaScript compilat în browser.

React.createElement apelul din partea dreaptă este o reprezentare JavaScript a modelului de obiect document (DOM). React eficient îl traduce în operații DOM pe care le efectuează în browser.

Să scriem o componentă React.

Voi folosi jsComplete Reactează locul de joacă pentru exemplele din acest articol. Este un instrument în care vă puteți testa codul JavaScript și React direct în browser. Nu este nevoie să instalați sau să configurați nimic.

1612059550 444 Cum sa scrieti prima componenta Reactjs

Instrumentul are o interfață simplă cu două panouri. Panoul din stânga este editorul în care scrieți codul JavaScript și React. Cea mai recentă versiune atât a React cât și a ReactDOM sunt deja pre-încărcate acolo. Editorul înțelege, de asemenea, extensia JSX și toate caracteristicile moderne din JavaScript. Acest lucru ne va permite să ne concentrăm pe React API în loc să configurăm și să compilăm o aplicație React.

Panoul din dreapta este panoul de previzualizare. Aveți un dispozitiv predefinit mountNode element din editor. Când executați codul JavaScript, orice ați introdus în mountNode elementul apare în panoul de previzualizare. Panoul de previzualizare va afișa, de asemenea, orice erori pe care le întâlniți atunci când executați codul. Terenul de joacă este, de asemenea, un simplu JavaScript REPL (Run, Eval, Print, Loop) unde puteți testa funcții și expresii rapide JavaScript. Pentru a executa codul în orice moment, apăsați CTRL+Enter.

Încercați următoarele în REPL, de exemplu:

mountNode.innerHTML = 'Hello!!';

Sau modul simplu REPL

3 == '3'

Pentru a crea o componentă React, definiți o nouă funcție. Să facem ca funcția să returneze un element de buton HTML:

function Button() {  return (    <button>Go</button>  );}

Ceea ce am întors aici arată ca HTML, dar amintiți-vă că nu este. Acesta va fi compilat în JavaScript. JavaScript-ul real pe care îl vede browserul când folosim acest element buton în JSX este un apel către React.createElement funcţie:

function Button() {  return (    React.createElement("button", null, "Go")  );}

Deși puteți utiliza React în acest mod fără JSX, ar fi mult mai greu de codat și întreținut. Deci, să rămânem cu JSX.

Funcția de mai sus este o componentă React completă și foarte simplă. Să-l folosim!

Folosim o componentă montând-o în browser. Funcția concepută pentru a face acest lucru este ReactDOM.render, care include două argumente:

  • Prima este componenta de redat, în cazul nostru este Button.
  • Al doilea argument este elementul în care ar trebui redată această componentă. În mediul REPL putem folosi specialul mountNode variabil.
ReactDOM.render(<Button />, mountNode);
1612059550 823 Cum sa scrieti prima componenta Reactjs
https://jscomplete.com/repl?j=Skl5GngO-

Toate exemplele de cod din acest articol au un link în legenda capturii de ecran, unde puteți edita exemplul la jsComplete REPL.

O componentă a funcției React primește ca prim argument argumentul props obiect. Acest argument ne permite să facem componenta reutilizabilă. De exemplu, în loc să codificăm hard eticheta „Go” a butonului de mai sus, putem trece Button componenta a label atribut, la fel ca în cazul elementelor HTML obișnuite:

ReactDOM.render(<Button label="Save" />, mountNode);

Apoi putem accesa acest atribut în interiorul componentei cu o paranteză buclată pentru props.label.

function Button(props) {  return (    <button>{props.label}</button>  );}

props argumentul este un obiect care deține toate valorile care au fost transmise componentei atunci când a fost redată.

1612059550 993 Cum sa scrieti prima componenta Reactjs
https://jscomplete.com/repl?j=ByQm4nl_Z

Realizarea componentei interactive

Avem un element buton și este redat printr-o componentă React.

Să adăugăm acum ceva interactivitate la acest exemplu plictisitor de până acum. Să facem ca acel element de buton să crească o valoare de contor la fiecare clic și să afișăm acea valoare ca eticheta butonului în sine. Deci, eticheta acestui buton va începe cu numărul 1 și atunci când utilizatorul face clic pe buton, eticheta acestuia se va schimba la 2, 3, 4 și așa mai departe.

Deoarece acest lucru trebuie reflectat în ieșirea redată a componentei, aceasta aparține stării componentei. Avem nevoie ca componenta să se redea de fiecare dată când contorul se schimbă. Nu putem folosi o proprietate aici, deoarece elementele de recuzită nu pot fi schimbate. Folosind obiectul de stare special React, vom folosi React reactiv natură și nu va trebui să ne facem griji Cum pentru a prelua modificările browserului. React va face asta pentru noi.

Dar componenta Button este în prezent o componentă funcțională. Componentele funcției nu pot avea stare, deci trebuie mai întâi să actualizăm această componentă la o componentă de clasă.

Acest lucru este foarte simplu. Mai întâi definim o clasă care se extinde React.Component

class Button extends React.Component { }

În acea clasă definim un render funcție, care returnează JSX-ul componentei; butonul HTML în cazul nostru.

render() {  return (    <button>1</button>  );}

Acesta este un pic mai mult cod, dar acum putem folosi un stat privat pe componenta Buton!

1612059551 106 Cum sa scrieti prima componenta Reactjs
https://jscomplete.com/repl?j=BJCWI2gd-

Pentru a utiliza un obiect de stare trebuie mai întâi să-l inițializăm. Obiectul de stare este o proprietate de instanță simplă, deci îl putem inițializa în funcția de constructor a Button clasă. Tocmai definim funcția normală de constructor (care primește un props obiect în React) și apelați super metodă de onorare a moștenirii componentei.

constructor(props) {  super(props);  this.state = { counter: 1 };}

După aceea, inițializăm this.state la orice vrem. Cheile acestui obiect de stare sunt diferitele elemente ale stării. Pentru cazul nostru, avem nevoie de un counter care începe de la 1.

În interiorul funcției de redare, deoarece putem scrie orice expresie JavaScript între paranteze bucle, putem citi valoarea noii counter element de stat pe care l-am inițializat pe stat folosind this.state.counter.

render() {  return (    <button>{this.state.counter}</button>  );}

this”Cuvânt cheie se referă la instanța componentă pe care o predăm ReactDOM.

1612059551 500 Cum sa scrieti prima componenta Reactjs
https://jscomplete.com/repl?j=SJfwu2xuZ

Puteți încerca să modificați starea contorului pentru a vedea cum butonul va reda valorile pe care le-ați pus pe starea respectivă.

Există o altă sintaxă mai scurtă pentru a defini starea inițială, care este de a utiliza pur și simplu o proprietate de clasă fără un apel constructor:

class Button extends React.Component {  state = { counter: 1 };    render() {    return (      <button>{this.state.counter}</button>    );  }}

Aceasta nu face parte încă din limba oficială JavaScript, dar va fi în curând. Sintaxa funcționează la locul de joacă jsComplele REPL deoarece instrumentul respectiv folosește Babel pentru a-l transpile în JavaScript acceptat pe care browserul îl va înțelege.

Când vă configurați propria aplicație React, va trebui să folosiți oricum ceva de genul Babel pentru a compila JSX în JavaScript. Este un câștig ușor să incluzi și să folosești funcțiile JavaScript care sunt pe cale să devină parte oficială a limbii.

În Button exemplu până acum, avem un obiect de stare și un element de buton HTML care afișează o valoare de contor pe care am inițializat-o pe stare. Acum trebuie să schimbăm acea valoare atunci când facem clic pe buton. Trebuie să definim un handler de clic pe butonul respectiv.

React vine cu evenimente normalizate, ușor de utilizat. Pentru acest caz, avem nevoie de onClick eveniment, pe care îl definim pe elementul buton HTML în sine:

function F() {}
<button onClick={F} />

Spre deosebire de gestionarele de evenimente DOM, care utilizează un șir, gestionarele de evenimente React folosesc o funcție JavaScript reală. Această funcție poate fi una globală (cum ar fi F de mai sus) sau o funcție în linie:

<button onClick={() => {}} />

Cu toate acestea, practica standard este de a defini o funcție pe componenta clasei în sine. Să-i spunem handleClick și îl putem defini pe componentă ca o proprietate de instanță:

class Button extends React.Component {  state = { counter: 1 };    handleClick = () => {    console.log('Button is clicked!!');  };    render() {    return (      <button onClick={this.handleClick}>        {this.state.counter}      </button>    );  }}

Folosim sintaxa câmpului de clasă modernă, care ne permite să folosim funcții săgeată care sunt legate de instanța componentă. handleClick va acționa acum ca o funcție prototip pe această clasă. Interior handleClick cuvântul cheie „this”Se referă la instanța componentă pe care o montăm în DOM.

handleClick Lucrarea este ușoară: citiți valoarea contorului curent din obiectul de stare folosind this.state.counter. Apoi incrementați această valoare și actualizați starea componentei cu noua valoare incrementată.

Putem folosi integrat React setState , care este disponibilă pentru fiecare instanță de componentă de clasă, pentru a actualiza o stare a componentei.

1612059551 633 Cum sa scrieti prima componenta Reactjs
https://jscomplete.com/repl?j=Sy-u46l_Z

Butonul își va crește eticheta la fiecare clic.

A fost simplu și puternic! Am definit un gestionar de evenimente pentru onClick metodă. De fiecare dată când utilizatorul dă clic pe butonul handleClick funcția va fi executată. Funcția citește starea curentă a valorii contorului, o crește, apoi setează starea la noua valoare incrementată. React are grijă de toate randările necesare după aceste modificări, astfel încât nu trebuie să vă faceți griji cu privire la asta.

Rețineți că nu am actualizat direct obiectul de stare. Trebuie să folosim React’s setState metoda când vrem să actualizăm orice element de pe stat. De exemplu, nu puteți face acest lucru:

// WRONG:this.state.counter = this.state.counter + 1;

Reacționează setState metoda este una asincronă care programează o actualizare. Multiplu setState apelurile ar putea fi grupate pentru performanță. Deoarece citim și scriem atât obiectului de stare din interiorul handleClick funcție, am putea atinge o condiție de cursă. Regula generală este de fiecare dată când trebuie să actualizați starea folosind o valoare din starea curentă, utilizați celălalt contract al setState metodă. Aceasta primește o referință de funcție în locul unui obiect ca primul său argument:

this.setState((prevState) => {});

Această funcție primește un prevState obiect pe care îl putem folosi cu încredere fără a ne îngrijora de condițiile rasei. Funcția returnează obiectul pe care dorim să-l folosească React pentru a seta starea. Al nostru counter exemplu de valoare de mai sus devine:

this.setState((prevState) => ({  counter: prevState.counter + 1 }));

Trebuie doar să utilizați această a doua sintaxă a setState dacă actualizarea dvs. depinde de starea actuală. Cu toate acestea, poate fi o idee bună să vă obișnuiți să folosiți întotdeauna a doua sintaxă funcție-argument.

Iată codul final:

class Button extends React.Component {  state = { counter: 1 };    handleClick = () => {    this.setState((prevState) => ({      counter: prevState.counter + 1     }));  };    render() {    return (      <button onClick={this.handleClick}>        {this.state.counter}      </button>    );  }}
ReactDOM.render(<Button />, mountNode);

Testează-l iar dacă aveți întrebări anunțați-mă în comentariile de mai jos.

Acest articol este o redactare a unei părți a cursului meu Pluralsight – React.js: Noțiuni introductive. Acoperi conținut similar în format video acolo.

Învățare reacționează sau nod? Verificați cărțile mele: