Reacționați componenta funcției cu un exemplu

Componentele funcției sunt ca funcțiile Javascript care pot primi elemente de recuzită și pot returna elemente de reacție. Ele nu pot avea stat, prin urmare, numite componente apatride.

Componentele funcției sunt la fel ca funcțiile JavaScript. Ei pot primi, de asemenea, props, dar nu pot avea o stare. Prin urmare, ele sunt numite componente apatride. Cu toate acestea, starea poate fi atinsă folosind un cârlig numit useState(). Vom citi mai multe despre cârlige mai târziu.

Să creăm aceeași componentă Book folosind componenta funcției de reacție.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book() {
    return <h1>This is a book</h1>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Ieșire

Trecerea elementelor de recuzită către o componentă de funcție

props componentelor funcționale sunt transmise la fel ca și componentele clasei, dar pentru a accesa props, trebuie să primiți obiectul props prin argument și să accesați prop după numele său. Vezi exemplul de mai jos.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book(props) {
    return <div>
        <h1>This is a book with index: {props.index}</h1>
        <h2>Author: {props.author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

Ieșire

De asemenea, puteți primi elemente de recuzită individuale după nume și să le accesați numai după nume. Exemplul de mai sus poate fi scris și în acest fel.

import React from 'react';
import ReactDOM from 'react-dom';

export default function Book({index, author}) {
    return <div>
        <h1>This is a book with index: {index}</h1>
        <h2>Author: {author}</h2>
    </div>
}

ReactDOM.render(<Book index={1} author={'Michael'}/>, document.getElementById('root'));

Dacă componenta dvs. include o altă componentă(e), atunci acele componente secundare pot fi primite de un suport special numit copii. Le puteți accesa în același mod ca în exemplul de mai sus.

Utilizarea stării într-o componentă a funcției

Starea este folosită pentru a menține datele într-o componentă, astfel încât ori de câte ori starea se schimbă, componenta se redă din nou.

Deoarece componentele funcționale sunt apatride în mod implicit, nu au stare, dar acest lucru poate fi realizat folosind un cârlig numit useState().

Vedeți exemplul de mai jos în care am redat o componentă Book. Această componentă creează 2 variabile de stare numite indexși autor, le atribuie valorile inițiale „2” și „Bucurie”. respectiv, și accesați-le după numele lor.

import React, {useState} from 'react';
import ReactDOM from 'react-dom';

export default function Book() {
  const [index, setIndex] = useState('2');
  const [author, setAuthor] = useState('Joy');
  return <div>
    <h1>This is a book with index: {index}</h1>
    <h2>Author: {author}</h2>
  </div>
}

ReactDOM.render(<Book/>, document.getElementById('root'));

Ieșire

Cârligul useState() ne oferă, de asemenea, apel invers pentru a actualiza valorile variabilelor de stare. În exemplul de mai sus, setIndexși setAuthorsunt apel invers pentru index și autorulrespectiv. Puteți apela aceste metode pentru a-și actualiza valorile, odată actualizate, componenta Book se va reda.