Reaguj na komponent funkcji z przykładem

Komponenty funkcyjne przypominają funkcje JavaScriptu, które mogą odbierać rekwizyty i zwracać elementy reagujące. Nie mogą mieć stanu, dlatego nazywane są komponentami bezstanowymi.

Komponenty funkcyjne działają podobnie jak funkcje JavaScript. Mogą również otrzymać props, ale nie mogą mieć stanu. Dlatego nazywane są komponentami bezstanowymi. Stan ten można jednak osiągnąć za pomocą haka zwanego useState(). Więcej o hakach przeczytamy później.

Utwórzmy ten sam komponent Book, używając komponentu funkcji reakcji.

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'));

Wyjście

Przekazywanie rekwizytów do komponentu funkcji

props do komponentów funkcjonalnych przekazywane są w taki sam sposób, jak komponenty klas, ale aby uzyskać dostęp do props, musisz otrzymać obiekt props za pomocą argumentu i uzyskać dostęp do właściwości po jego nazwie. Zobacz przykład poniżej.

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'));

Wyjście

Możesz także otrzymać indywidualne rekwizyty po imieniu i uzyskać do nich dostęp tylko po imieniu. Powyższy przykład można zapisać również w ten sposób.

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'));

Jeśli Twój komponent otacza inny(e) komponent(y), wówczas te komponenty podrzędne mogą zostać odebrane przez specjalną rekwizyt o nazwie children. Możesz uzyskać do nich dostęp w taki sam sposób, jak w przypadku indeksowania i autora w powyższym przykładzie.

Używanie stanu w komponencie funkcji

Stan służy do przechowywania danych w komponencie, więc za każdym razem, gdy stan się zmienia, komponent jest ponownie renderowany.

Ponieważ komponenty funkcjonalne są domyślnie bezstanowe, nie mają stanu, ale można to osiągnąć za pomocą haka o nazwie useState().

Zobacz poniższy przykład, w którym wyrenderowaliśmy komponent Book. Komponent ten tworzy 2 zmienne stanu zwane indeks i autor, przypisuje im początkowe wartości „2” i „Radość ' i uzyskaj dostęp do nich po nazwie.

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'));

Wyjście

Hak useState() umożliwia nam również wywołanie zwrotne w celu aktualizacji wartości zmiennych stanu. W powyższym przykładzie setIndexi setAuthorsą wywołaniami zwrotnymi dla index i autorodpowiednio. Możesz wywołać te metody, aby zaktualizować ich wartości. Po aktualizacji komponent Book zostanie ponownie wyrenderowany.