Sebastian N.

present my blog programming

React Hooks

2019-04-30 SeNAPI

React Hooks jest to nowość w API Reacta 16.8. czyniąca kod czytelniejszym, czasem krótszym ale przede wszystkim w moim przekonaniu łatwiejszym.

unsplash.com

Czym te hooks są?

  • gotowe do użycia w aplikacji i można za ich pomocą dołączać nowe komponenty bez przymusu przepisywania istniejących już komponentów, bo poprostu są z nimi kompatybilne,
  • jako komponenty funkcyjne stanowią alternatywę dla komponentów klasowych w React,
  • udostępniają bezpośrednie API do używanych pojęć w React takich, jak: props, state, context, refs, lifecycle,
  • alteratywą HOC(Higher-order-components) oraz render props, ponieważ umożliwiają ponowne wykorzystanie logiki stanowej bez potrzeby zmiany hierarchii komponentów,
  • umożliwiają podzielenie jednego wielkiego komponentu na kilka mniejszych z przeznaczoną dla nich logiką użytkową,
  • konceptualnie zbliżają się do JavaScriptu i Reacta pod względem bycia bliżej funkcyjnego założenia,

Budowa komponentu funkcyjnego za pomocą hooks?

Na początek przykładowy komponent funkcyjny:

function ChildComponent (props) {
    const [propCities, setPropCities] = useState(props.cities)
    return(
        <div key={props.activeCity} >
            {propCities[props.activeCity].nameCity}
        </div>
    )
}

Budowa zaczyna się od słowa kluczowego function wskazujący kompilatorowi, że jest to funkcja a nie class-a, komponenty zaczynamy z dużej litery, żeby kompilator rozumiał z czym ma doczynienia. W każdym takim komponencie musi zawierać się kolejne słowo kluczowe return, oznaczające instrukcję wywołującą zawartość funkcji/komponentu. Tu mamy jeszcze dodany parametr (props), który nie jest obligatoryjny o ile nie chcemy przesłać wybranej wartości z innego komponentu. W komponencie klasowym, w którym zamiast słowa function występuję class używamy do ustawiania i zmiany stanów słów kluczowych: state -> stan i setState -> ustaw stan lub zestaw stanów, natomiast w komponencie funkcyjnym z wykorzystaniem hooks stosujemy budowe const [jakiśStan, setJakiśStan] = useState(wartość stanu). setJakiśStan jest jednocześnie automatyczną funkcją, w której możemy ustawić/zmienić wartość stanu początkowego (jakiśStan), zaś po słowe kluczowym useState() określamy wartość stanu.

Ustawienie/zmiana stanu w hooks?

Do ustawienia/zmiany stanu początkowego służy słowo kluczowe set do którego dodajemy nazwę stanu, który chcemy ustawić name -> setName, np:

function ChildComponent () {
    const [name, setName] = useState('Artur');
    function changeName (name) {
        setName('Kamil');
        return name
    }
    return(
        <div>
            {name}
            <button onClick={changeName} > Change Name </button>
            <button onClick={e => setName('Marcin')} > Change Name 2</button>
        </div>
    )
}

Możemy wykorzystać funkcję zmieniającą w różnych miejscach, tu mamy przykład przycisków 1 odnoszącego się do funkcji changeName, w której zawarta jest funkcja z nowym stanem oraz instrukcją return zwracającą ten stan i 2 przypisaną bezpośrednio w buttonie e => setName(‘Marcin).

Podsumowując!

Hooks jest ciekawą alternatywą dla komponentów class-owych, upraszczają i czynią czytelniejszym kod przez co domyślenie się przez innych developerów o co autorowi chodziło jest dużo łatwiejsze.

Zachęcam do przejrzenia dokumentacji na stronie https://reactjs.org/docs/hooks-intro.html

Miłego!