Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Kako novi REF kot funkcija podpornik izboljšuje učinkovitost razvoja


Kako novi REF kot funkcija podpornik izboljšuje učinkovitost razvoja


Nova funkcija v React 19, ki omogoča prenos REF -a kot rekvizitov namesto uporabe `ForwardRef`, lahko izboljša učinkovitost razvoja na nekaj ključnih načinov:

enostavnejši in bolj intuitiven API

Prenos REFS kot redni rekviziti je bolj naraven in intuitiven API v primerjavi z uporabo `Forwardsref`. Bolje se uskladi z načelom jedrnega reakcije, da podatke prenese po komponentnem drevesu prek rekvizitov. Zaradi tega je koda lažje razumeti in razložiti, zlasti za začetnike.

Zmanjšana plošča

Uporaba `ForwardsRef` zahteva, da otroško komponento zavijete v klic` Forwardref` in prenesete "ref" kot drugi argument v komponento funkcije. To doda nekaj kode plošče. Če neposredno prenesete ref kot podpornik, odpravlja to dodatno kodo.

Boljša kapsulacija

Pri uporabi `Forwardsref` se mora otroška komponenta zavedati, da prejema ref in jo mora pritrditi na ustrezen DOM element. Prenos ref kot rekvizit omogoča otroški komponenti, da se ne zaveda ref, kar izboljšuje inkapsulacijo.

Lažje refaktoring

Če morate preoblikovati drevo komponent in spremeniti točko pritrditve REF, je preprosteje posodobiti ime podpore, namesto da bi morali posodobiti klic `Forwardref` na več mestih. Zaradi tega je kodna baza bolj vzdržljiva.

V skladu s komponentami razredov

V komponentah razredov so refs pritrjeni s pomočjo "ref` rep, ne prek posebnega mehanizma" ForwardRef ". Dovoljenje REF -jev kot rekvizitov v komponentah funkcij zagotavlja bolj dosleden API v razredu in funkcijskih komponentah.

Lažje preverjanje vrste

Pri uporabi TypeScript je preprosteje vnesti preverjanje REF, ki je bil poslan kot podpornik v primerjavi z uporabo vrst `Forwardsref` in` Refittributes`. Vrsto rekcije lahko sklepamo neposredno iz objekta "Ref".

Če povzamemo, nova funkcija REFS AS REFS naredi React API bolj intuitiven, zmanjšuje kotlovnico, izboljšuje inkapsulacijo in naredi bazo kode bolj vzdržno - vse to izboljša učinkovitost razvijalca pri delu z REF v React 19 in več [1] [3] [4].

Navedbe:
[1] https://www.copycat.dev/blog/react-forwardref/
[2] https://stackoverflow.com/questions/58578570/value-of-using-react-forwarwref-vs-custom-ref-prop
[3] https://legacy.reactjs.org/docs/forwarding-refs.html
[4] https://www.reddit.com/r/reactjs/comments/1asgpy9/ref_as_prop_advance_beginner_question/
[5] https://blog.logrocket.com/why-you-shoul-shoul-use-refs-paparingly-in-production/
[6] https://react.dev/blog/2024/04/25/react-19-pagrade-guide
[7] https://dev.to/dalcio/react-performance-usestate-reducer-ref-teoretično-summary-1bok
[8] https://www.freecodecamp.org/news/new-react-19-features/