Hooki używane są głównie do dostarczania stanów, metod cyklu życia i wszystkich innych funkcji w komponencie funkcjonalnym, które zazwyczaj otrzymujemy w komponencie klasowym. Ale także ułatwia aplikację.

Gdzie używać

Haki są używane głównie w elementach funkcjonalnych React. Ponieważ komponenty funkcjonalne są bezstanowe, a haki zapewniają nam łatwość korzystania z większości zawartych w nich funkcji React.

Dlaczego wolimy haczyki

Aby to zrozumieć, powinniśmy najpierw zrozumieć, dlaczego używamy komponentów funkcjonalnych, ponieważ ostatecznie są one używane wewnątrz komponentów funkcjonalnych.

korzyści płynące z zastosowania funkcjonalnego komponentu

• Pozwala to uniknąć niepotrzebnego używania dziedziczenia, którego zwykle używamy w komponencie klasy.
• stąd nie ma potrzeby deklarowania konstruktora lub wywoływania super.
• Nie ma potrzeby wiązania funkcji z tym kontekstem komponentu.

useState

Używany głównie do tworzenia zmiennej stanu, a także zapewnia funkcję modyfikacji stanu. Może być używany dowolną ilość razy.

const [ name, setName ] = useState ( „Rajiv”)

użyjEfekt

Ten zaczep może być używany przez 3 cykle życia — componentDidMount, componentDidUpdate i componentWillUnmount. Może być używany wielokrotnie w komponencie.

useEffect ( ()=>{console.log('to będzie działać jako componentDidMount');}, [ ])

useEffect ( ()=>{console.log('to będzie działać jako componentDidUpdate');}, [nazwa])

useEffect ( ()=>{

return()=>{console.log('to będzie działać jako componentWillUnmount'); }

}, [ ])

Haki do redux

Podobnie jak w przypadku React, biblioteka React-redux zapewnia również kilka punktów zaczepienia ułatwiających implementację redux. Zobaczmy je -

użyj selektora

Służy do zapewnienia sklepu redux, aby reagować na elementy funkcjonalne. Wcześniej używaliśmy mapStateToProps z metodą connect w celu uzyskania stanu z redux.

const postsList = useSelector(store => store.posts.postsData)

Jak widać w powyższym przykładzie useSelector akceptuje wywołanie zwrotne zawierające store jako parametr i możemy wybrać żądane dane do zwrócenia z niego. Tutaj pobraliśmy postData ze sklepu jako postsList, a następnie możemy go użyć do wyświetlenia za pomocą mapy.

użyjWyślij

Służy do wysyłania akcji bezpośrednio z komponentu reakcji. Wcześniej musimy użyć wysyłki z connect lub mapDispatchToProps za pomocą bindActionCreators .

const wysyłka = useDispatch();

Jak widać w powyższym przykładzie useDispatch zwraca funkcję wysyłającą. Tutaj uruchomiliśmy akcję addPost po kliknięciu przycisku Dodaj.

wniosek

hooks sprawia, że ​​programowanie jest łatwiejsze i prostsze dzięki dodaniu wielu wspaniałych funkcji i zapewnia lepszą opcję klasy komponentu. Zmniejsza złożoność, a także pozwala uniknąć mylenia tego słowa kluczowego.