Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Kokių dažniausiai pasitaikančių klaidų reikia vengti, kai „React Hook“ priklausomybės nuo būsenų yra atnaujinamos


Kokių dažniausiai pasitaikančių klaidų reikia vengti, kai „React Hook“ priklausomybės nuo būsenų yra atnaujinamos


Atkuriant būsenos priklausomybes „React Hooks“, reikia vengti kelių įprastų klaidų:

1. Kabliukų taisyklių nesilaikymas:
- Nekvieskite kabliukų kilpų, sąlygų ar įdėtųjų funkcijų viduje. Vietoj to visada naudokite kabliukus aukščiausiame React funkcijos lygyje, prieš pradėdami grąžinti.
- Nekvieskite kabliukų iš įprastų JavaScript funkcijų. Vietoj to galite iškviesti Hooks iš React funkcijos komponentų arba pasirinktinių kabliukų[1].

2. Protingai nenaudoti kabliukų:
- Venkite be reikalo naudoti kabliukus. Naudokite juos tik tada, kai būtina, ir nenaudokite jų per daug.
– Naudokite kabliukus būsenai ir šalutiniams poveikiams valdyti, bet nenaudokite jų kitiems tikslams, pvz., atvaizdavimui ar stiliui kurti[2].

3. Kabliukų netvarkymas ir struktūrizavimas:
- Laikykite savo kabliukus tvarkingus ir struktūrizuotus. Venkite maišyti skirtingų tipų kabliukų.
- Naudokite tinkintus kabliukus, kad įterptumėte sudėtingą logiką ir paverstumėte savo kodą lengviau skaitomu[2].

4. Nenaudojate ESLint papildinio:
- Naudokite ESLint įskiepį, kad įgyvendintumėte Hooks taisykles. Tai gali padėti pastebėti klaidas ir užtikrinti, kad jūsų kodas atitiktų geriausią praktiką[1].

5. Netikrinti kabliukų:
- Parašykite savo kabliukų vienetų testus, kad įsitikintumėte, jog jie veikia taip, kaip tikėtasi, ir tinkamai elgiasi su kraštinėmis.
- Norėdami išbandyti savo kabliukus, naudokite Jest ar kitas testavimo sistemas[4].

6. Nenaudojamas nenurodytas Kitas:
- Norėdami valdyti būseną centralizuotoje vietoje, naudokite Unstated Next. Tai gali padėti sumažinti priklausomybę nuo būsenų ir padaryti kodą lengviau prižiūrimą[5].

7. Geriausios praktikos nesilaikymas:
– Vadovaukitės geriausios „React“ būsenos valdymo praktikos pavyzdžiais, pvz., venkite nereikalingos būsenos ir naudokite konteksto API bendrinant būseną[3].

8. Žemėlapio ir atvaizdavimo masyvų nenaudojimas dinamiškai:
- Dinamiškai naudokite žemėlapio ir pateikimo masyvus, kad išvengtumėte nereikalingo atvaizdavimo ir pagerintumėte našumą[3].

9. Kabliukų nenaudojimas pašaliniams poveikiams:
- Naudokite Hooks, kad pašalintumėte šalutinį poveikį, pvz., gautumėte duomenis arba nustatytumėte laikmačius. Nenaudokite jų atvaizdavimui ar stiliui kurti[2].

10. Kabliukų nenaudojimas sudėtingai logikai:
- Naudokite Hooks sudėtingai logikai, apimančiai kelis būsenos kintamuosius arba šalutinį poveikį. Venkite jų naudoti kaip paprasta logika, kurią galima išspręsti kitomis priemonėmis[2].

Vengdami šių įprastų klaidų, galite užtikrinti, kad jūsų „React Hooks“ būtų geros struktūros, prižiūrimi ir veiksmingi.

Citatos:
[1] https://legacy.reactjs.org/docs/hooks-rules.html
[2] https://www.smashingmagazine.com/2020/04/react-hooks-best-practices/
[3] https://bosctechlabs.com/react-hooks-practices-in-2024/
[4] https://www.linkedin.com/pulse/react-hooks-best-practices-efficient-maintainable-code-sasidharan-djlfc
[5] https://css-tricks.com/managing-state-in-react-using-unstated-next/