State Hooks

Stan pozwala komponentowi „zapamiętać” informacje, takie jak dane wprowadzone przez użytkownika. Na przykład komponent formularza może używać stanu do przechowywania wartości wejściowej.

import React, { useState } from 'react';
function Example() {
        // Declare a new state variable, which we'll call "count"

        const [count, setCount] = useState(0);

        return (
                <div>
                <p>You clicked {count} times</p>
                <button onClick={() => setCount(count + 1)}>
                        Click me
                </button>
                </div>
        );
}

Aby dodać stan do komponentu, użyj jednego z tych hooków:

useState deklaruje zmienną stanu, którą możesz bezpośrednio zaktualizować.

useReducer deklaruje zmienną stanu z logiką aktualizacji wewnątrz funkcji redukującej (nie bedziemy opisywać tego hooka w tych materiałach).

Tutaj useState jest hookiem. Wywołujemy go wewnątrz komponentu funkcji, aby dodać do niego jakiś stan lokalny. React zachowa ten stan pomiędzy ponownymi renderowaniami.

Co zwraca useState? Zwraca parę wartości: bieżący stan i funkcję, która go aktualizuje. Dlatego piszemy const [count, setCount] = useState(). Działa to podobnie do this.state.count i this.setState w klasie, z tą różnicą, że otrzymujesz je w parze. Możesz też nazwać tę funkcję jak chcesz. Uwaga! W przypadku hooka nic nie łączy kolejnych stanów, więc trzeba zawsze definiować pełny stan.

Jedynym argumentem useState jest stan początkowy. W powyższym przykładzie jest to 0, ponieważ nasz licznik zaczyna się od zera. Zauważ, że w przeciwieństwie do this.state, stan tutaj nie musi być obiektem — chociaż może nim być, jeśli chcesz. Argument stanu początkowego jest używany tylko podczas pierwszego renderowania.

Możemy definiować wiele wartości stanu jednocześnie, by to zrobić będziemy wywoływać funkcję useState wielokrotnie:

function Car() {
        const [brand, setBrand] = useState("Fiat");
        const [model, setModel] = useState("126p");
        const [year, setYear] = useState("1964");
        const [color, setColor] = useState("red");

Możemy też po prostu użyć jednego stanu i zamiast tego dołączyć obiekt:

function Car() {
        const [car, setCar] = useState({
                brand: "Fiat",
                model: "126p",
                year: "1964",
                color: "red"
});

Uwaga! Gdybyśmy wywołali tylko setCar({color: "blue"}), usunęłoby to markę, model i rok z naszego stanu!

Pamiętaj więc by korzystać z:

const updateColor = () => {
        setCar(previousState => {
                return { ...previousState, color: "blue" }
        });
}

React zakłada, że jeśli wywołujesz useState wiele razy, robisz to w tej samej kolejności podczas każdego renderowania.

Zadanie

Uruchom przykład z hookiem useState.

Effect Hooks

Hook effect, useEffect, dodaje możliwość wykonywania efektów ubocznych (zmieniających stan wokół komponentu) z komponentu funkcyjnego. Służy temu samemu celowi, co componentDidMount, componentDidUpdate i componentWillUnmount w klasach React, ale jest zunifikowany w jednym API.

useEffect(() => {
        // Update the document title using the browser API
        document.title = `You clicked ${count} times`;
});

Kiedy wywołujesz useEffect, mówisz Reactowi, aby uruchomił funkcję „efektu” po opróżnieniu zmian do DOM. Efekty są deklarowane wewnątrz komponentu, dzięki czemu mają dostęp do jego właściwości i stanu. Domyślnie React uruchamia efekty po każdym renderowaniu — łącznie z pierwszym renderowaniem.

Podobnie jak w przypadku useState, w komponencie możesz użyć więcej niż jednego efektu:

Domyślnym zachowaniem efektów jest uruchamianie efektu po każdym ukończonym renderowaniu. W ten sposób efekt jest zawsze odtwarzany, jeśli zmieni się jedna z jego zależności.

Jednak w niektórych przypadkach może to być przesada, jak na przykład w przypadku subskrypcji z poprzedniej sekcji. Nie musimy tworzyć nowej subskrypcji przy każdej aktualizacji, tylko jeśli zmienił się element źródłowy.

Aby to zaimplementować, przekaż drugi argument do useEffect, który jest tablicą wartości, od których zależy efekt. Nasz zaktualizowany przykład wygląda teraz tak:

Podany effect wywoła się tylko raz

useEffect(() => {
        //Runs only on the first render
}, []);

Podany efekt wywoła się przy każdej zmianie wartości props.source:

useEffect(
        () => {
                const subscription = props.source.subscribe();
                return () => {
                        subscription.unsubscribe();
                };
        },
[props.source],
);

Wykorzystując useEffect możemy użyć czegoś, co nazywa się czyszczeniem. Służy do tego funcja wykonywana po return (czyli w momencie niszczenia hooka) i wykorzystywana jest głównie np do czyszczenia listenerów.

useEffect(() => {
        console.log("side effect 1", count);
        return () => {
        console.log("DESTROYED 1");
        };
});

Zadanie

Dodaj effect hook do komponentu zliczający liczbę odświeżeń komponentu setState, zobacz jego działanie.

Zadanie

Sprawdź podany w rozdziale hooks błąd wykonania effect w przypadku wykorzystania go w instrukcji warunkowej.

Custom Hooks

Niestandardowe hooki są bardziej konwencją niż funkcją. Jeśli nazwa funkcji zaczyna się od „use” i wywołuje inne hooki, mówimy, że jest to hook niestandardowy. Konwencja nazewnictwa useSomething opisuje sposób, w jaki nasza wtyczka lintera może znajdować błędy w kodzie za pomocą hooków.

Stan każdego komponentu jest całkowicie niezależny. Hooki pozwalają na ponowne wykorzystanie logiki stanowej, a nie samego stanu. Tak naprawdę każde wywołanie Hooka ma całkowicie izolowany stan — możesz więc nawet dwukrotnie użyć tego samego niestandardowego Hooka w jednym komponencie.

Zadanie

Dodaj własny hook, pamiętaj że jego nazwa musi zaczynać się od "use...". Spraw by hook zwracał napis "parzyste/nieparzyste" zależnie od parzystości licznika. Dodaj jego wyświetlanie do głównego komponentu App.

import {useEffect, useState} from 'react';

function useCustomExample(counter) {

        const [word, setWord] = useState('Parzyste');

        function handleStatusChange(status) {
                ...
        }

        useEffect(..);

        return word;
}

export default useCustomExample;

Context hooks

Kontekst pozwala komponentowi odbierać informacje od odległych rodziców bez przekazywania ich jako props. Na przykład komponent najwyższego poziomu aplikacji może przekazać bieżący motyw interfejsu użytkownika do wszystkich komponentów poniżej, niezależnie od głębokości.

useContext odczytuje i subskrybuje kontekst.

function Button() {
        const theme = useContext(ThemeContext);
// ...

Parametry:

SomeContext: Kontekst utworzony wcześniej za pomocą narzędzia createContext. Sam kontekst nie przechowuje informacji, reprezentuje jedynie rodzaj informacji, które możesz dostarczyć lub odczytać z komponentów.

Aby określić wartość kontekstu, React przeszukuje drzewo komponentów i znajduje najbliższego dostawcę kontekstu powyżej dla tego konkretnego kontekstu.

Zadanie

Zobacz implementację ThemeProvidera i jego użycie w index.js. Następnie dodaj to klasy app.js wywołanie zmiany stylu strony

import './App.css';
import React from "react";
import StateExample from "./StateExample/StateExample";
import {ThemeContext} from "./ContextExample/ThemeProvider";

function App() {

        const {theme, toggle, dark} = React.useContext(ThemeContext)

        return (
                <div className="App" style={{backgroundColor: theme.backgroundColor, color: theme.color}}>
                        Test
                        <StateExample/>
                        <button
                                type="button"
                                onClick={toggle}
                                style={{
                                        backgroundColor: theme.backgroundColor,
                                        color: theme.color,
                                        outline: 'none'
                                }}
                        >
                                Toggle to {!dark ? 'Dark' : 'Light'} theme
                        </button>
                </div>
        );
}

export default App;

Ref hook

Referencje pozwalają komponentowi przechowywać pewne informacje, które nie są używane do renderowania, takie jak węzeł DOM lub identyfikator limitu czasu. W przeciwieństwie do stanu, aktualizacja ref nie powoduje ponownego renderowania komponentu. Referencje są „ucieczką” od paradygmatu React. Są przydatne, gdy musisz pracować z systemami innymi niż React, takimi jak wbudowane interfejsy API przeglądarki.

useRef deklaruje ref. Można w nim przechowywać dowolną wartość, ale najczęściej służy do przechowywania węzła DOM.

funkcja Formularz() {
        const inputRef = useRef(null);
// ...

Przykład:

import { useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
        const inputElement = useRef();

        const focusInput = () => {
                inputElement.current.focus();
        };

        return (
                <>
                <input type="text" ref={inputElement} />
                <button onClick={focusInput}>Focus Input</button>
                </>
        );
}

Hook useRef może być również użyty do śledzenia wartości poprzedniego stanu.

Dzieje się tak, ponieważ jesteśmy w stanie zachować wartości useRef pomiędzy renderowaniami.

Zadanie

Zobacz jak działa powyższy przykład

Zadanie

Przepisz zliczanie odświeżeń komponentu state na wykorzystanie ref

const count = useRef(0);

useEffect(() => {
        count.current = count.current + 1;
});

Memo hook

Hook Memo zwraca zapamiętaną wartość.

useMemo przeliczy zapamiętaną wartość tylko wtedy, gdy zmieni się jedna z zależności. Ta optymalizacja pomaga uniknąć kosztownych obliczeń przy każdym renderowaniu.

Pamiętaj, że funkcja przekazana do useMemo działa podczas renderowania. Nie rób tam niczego, czego normalnie nie zrobiłbyś podczas renderowania. Na przykład skutki uboczne należą do useEffect, a nie useMemo.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);