Předpokládám, že znáte základy o hácích v Reactu, ale pokud ne nebo byste se chtěli do tohoto konceptu ponořit trochu hlouběji, podívejte se na odkazy na konci tohoto blogu. Co jsou tedy vlastní háčky? Pokud jste používali dřívější verze Reactu, pravděpodobně jste narazili na vzory, jako jsou komponenty vyššího řádu a rekvizity vykreslování (můžete si o nich přečíst v mých předchozích blozích, komponenty vyššího řádu a rekvizity vykreslování). Tyto vzory (stejně jako háky) vám umožňují znovu použít stavovou logiku ve vašich komponentách React, ačkoli háky nabízejí méně složitý způsob, jak dosáhnout stejného výsledku opětovné použitelnosti. S vlastními háčky si můžeme vytvořit vlastní háčky a upravit je tak, aby obsahovaly jakoukoli logiku, kterou se k nim rozhodneme přidat. To nám dává větší flexibilitu při řešení konkrétního problému, který bychom mohli mít.
Začněme příkladem, kdy byste mohli cítit potřebu vytvořit vlastní háček. Řekněme, že jsme chtěli přidat časovač do aplikace React, kterou vytváříme. Můžeme to jednoduše zabudovat do naší komponenty, která ji potřebuje používat, a můžeme jít správně!? Ale co kdybychom potřebovali znovu použít náš časovač v několika komponentách? To by byla skvělá příležitost pro vlastní háček! Abychom vytvořili náš vlastní háček, měli bychom vždy začít slovem použít následovaný příslušným názvem. V tomto případě to nazýváme useTimer . Poté můžeme importovat kterýkoli z vestavěných háčků reakce, které budeme potřebovat do našeho vlastního.
Nyní s tímto kódem, kdekoli je v naší aplikaci potřeba časovač, pouze importujeme náš vlastní háček useTimer() a zobrazíme jej v naší komponentě. V tomto případě komponenta Timer.
Zde pouze vykreslujeme návratovou hodnotu z háku useTimer(), který jsme právě vytvořili. Tento časovač se aktualizuje při každém vyvolání setInterval() uvnitř useEffect().
Vlastní háky jsou skvělé pro opětovné použití obchodní logiky ve vaší aplikaci React. Když potřebujete něco méně abstraktního a trochu více přizpůsobeného vašemu komponentu, mohou se hodit. Místo pouhého používání vestavěných háčků můžeme mít větší flexibilitu přidáním přizpůsobeného kódu do opakovaně použitelného háčku.
Více zdrojů
-
Reagovat Hooks
-
Budování vlastních háčků
Původně publikováno na https://coderjay06.github.io dne 24. června 2021.