11 Jun Vad är Hooks?
Vad är egentligen grejen med React Hooks?
Hooks har fått stor uppmärksamhet för att de hjälper till att förenkla state management.
Tidigare behövde vi skriva klass-komponenter för att hantera state men nu kan vi istället göra functional components med Hooks!
Hooks ger dina funktionskomponenter liv! Funktionskomponenter är fantastiska, men dumma! ? De gör bara vad de instrueras att göra via properties – inget mer. Så snart de behöver hantera state måste de skrivas om som klasskomponenter. ?Som tur är går utvecklingen framåt! ?
Hooks ersätter och förenklar livscykelmetoderna i React.
Så – ska jag använda Hooks, klasskomponenter eller både och?
När du läst in dig på Hooks och känner dig redo bör du testa Hooks i nya komponenter. React-teamet rekommenderar inte att du skriver om alla dina befintliga klasser med Hooks – om de inte redan är planerade att byggas om. Hooks kan inte användas i klasskomponenter, men du kan blanda klass- och funktionskomponenter i samma komponent-träd. I förlängningen är Hooks tänkt att helt ersätta klass-komponenter.
Notera att Hooks fortfarande är relativt nytt och vissa tredjeparts-bibliotek fortfarande kan sakna stöd för Hooks. Testa därför först dina ändringar i en ny git-branch! ?
Hur funkar Hooks jämfört med livscykelmetoder?
- constructor:
Function components behöver ingen constructor, du kan initiera statet med “useState” - getDerivedStateFromProps:
shemalägg en uppdatering vid rendrering istället - shouldComponentUpdate:
Använd React.memo() istället - render:
Hanteras av function component body. - componentDidMount, componentDidUpdate, componentWillUnmount:
Hook “useEffect” kan hantera alla kombinationer av dessa - componentDidCatch and getDerivedStateFromError:
Det finns inga motsvarigheter än, men de kommer snart! ⏳