Te-ai întrebat cum să creezi o componentă în React?

Pentru a răspunde, este la fel de simplu ca crearea unei funcții care returnează o sintaxă HTML.

import React from 'react';

function Counter({n}) {
  return (
    <div>{n}</div>
  );
}

export default Counter;

Acum să vedem ce s-a întâmplat în codul de mai sus. Counter este o funcție care transformă un număr în HTML. Și dacă te uiți mai atent, Counter este o funcție pură. Așa este, tipul de funcție care returnează rezultatul pe baza intrărilor sale și nu are efecte secundare.

Această explicație vine cu o nouă întrebare. Ce este un efect secundar?

Pe scurt, un efect secundar este orice modificare a mediului din afara funcției sau orice informație citită din mediul exterior care se poate modifica.

Poate că ați observat că am folosit sintaxa alocării destructurării în lista de parametri pentru a extrage fișierul n numărul de intrare. Asta pentru că componentele iau ca intrare un singur obiect numit „recuzită” care are toate proprietățile care le sunt trimise.

Iată cum n parametrul poate fi setat din orice altă componentă:

<Counter n={1} />

Într-un sens, această sintaxă poate fi imaginată ca un apel funcțional Counter({n: 1}). Nu-i așa?

Să ne continuăm călătoria.

Componentele funcționale pot avea stare? După cum a sugerat numele componentei, vreau să stochez și să schimb un contor. Ce se întâmplă dacă declarăm doar o variabilă care deține un număr în interiorul componentei? Va funcționa?

Să aflăm.

Voi începe prin declararea variabilei din interiorul componentei funcționale.

import React from 'react';

function Counter() {
  let n = 0;
  return (
    <div>{n}</div>
  );
}

export default Counter;

Acum să adăugăm funcția care mărește numărul și o înregistrează pe consolă. Voi folosi funcția ca gestionar de evenimente pentru evenimentul de clic.

import React from 'react';

function Counter() {
  let n = 0;
  
  function increment(){
    n = n + 1;
    console.log(n)
  }
  
  return (
      <div>
        <span>{n}</span>
        <button onClick={increment}>Increment </button>
      </div>
  );
}

export default Counter;

Dacă ne uităm la consolă, vedem că numărul este de fapt incrementat, dar acest lucru nu se reflectă pe ecran. Vreo idee?

Ai înțeles bine … trebuie să schimbăm numărul, dar trebuie să-l redăm pe ecran.

Iată de unde funcția utilitară React Hooks intră în joc. Apropo, aceste funcții utilitare se numesc cârlige și încep cu cuvântul „folosiți”. Vom folosi unul dintre ei, useState. Voi înregistra și textul „redare” pentru a consola pentru a vedea de câte ori Counter funcția se numește de fapt.

import React, { useState } from 'react';

function Counter() {
  const [n, setN] = useState(0);
  
  console.log('re-render');
  
  function increment(){
    setN(n + 1);
    console.log(n)
  }
  
  return (
    <div>
        <span>{n}</span>
        <button onClick={increment}>Increment </button>
    </div>
  );
}

export default Counter;

Să citim ce useState() face.

Ce face useState întoarcere? Returnează o pereche de valori: starea curentă și o funcție care o actualizează.

În cazul nostru n este starea actuală și setN() este funcția care îl actualizează. Ați verificat consola pentru a vedea de câte ori este afișat textul „redare”? Voi lăsa asta pentru ca tu să afli.

Putem actualiza starea nu numai prin setarea noii valori, ci și prin furnizarea unei funcții care returnează noua valoare.

În cazul nostru, va fi apelată funcția care furnizează noua valoare increment(). Cum vedeți, increment() este o funcție pură.

import React, { useState } from 'react';

function increment(n){
  return n + 1;
}

function Counter() {
  const [n, setN] = useState(0);
  
  return (
    <div>
        <span>{n}</span>
        <button 
         onClick={() => setN(increment)}>
           Increment 
        </button>
    </div>
  );
}

export default Counter;

Pentru a înțelege ce setN(increment) da, să citim documentația.

Trecerea unei funcții de actualizare vă permite să accesați valoarea curentă a stării din actualizator.

OK, si increment() este apelat cu curentul n state și este folosit pentru a calcula noua valoare de stare.

Gânduri finale

Să rezumăm ceea ce am aflat.

În React putem defini pur și simplu o componentă folosind o funcție care returnează o sintaxă HTML.

React Hooks ne permite să definim starea în astfel de componente funcționale.

Și nu în ultimul rând, am scăpat în cele din urmă this pseudo-parametru în componente. Poate ai observat asta this devine enervant schimbând contextul când nu te aștepți. Nu vă faceți griji în legătură cu asta. Nu vom folosi this în componente funcționale.

Dacă ați ajuns până acum, puteți arunca o privire și asupra cărților mele.

Descoperiți JavaScript funcțional a fost numit unul dintre cele mai bune cărți de programare funcțională de BookAuthority!

Pentru mai multe despre aplicarea tehnicilor de programare funcționale pentru a reacționa, aruncați o privire Reactie functionala.

Învăța funcțional React, într-un mod bazat pe proiecte, cu Arhitectură funcțională cu React și Redux.

Trimiteți-mi feedback-ul dvs..