Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Kā jaunais REF kā balsta funkcija uzlabo attīstības efektivitāti


Kā jaunais REF kā balsta funkcija uzlabo attīstības efektivitāti


Jaunā React 19 funkcija, kas ļauj nodot refs kā rekvizītus, nevis izmantot `ForwardRef`, dažos galvenajos veidos var uzlabot attīstības efektivitāti:

vienkāršāka un intuitīvāka API

Refs kā regulāri rekvizīti ir dabiskāka un intuitīvāka API, salīdzinot ar `ForwardRef` izmantošanu. Tas labāk atbilst pamatprincipam par datiem, izmantojot komponentu koku, izmantojot rekvizītus. Tas padara kodu vieglāk saprotamu un saprātīgu, it īpaši iesācējiem.

Samazināta katlu plāksne

Izmantojot `ForwardRef`, ir jāaptver bērna komponenta iesaiņošana“ ForwardRef ”zvanā un funkcijas komponentam kā otro argumentu nodot“ Ref ”. Tas pievieno nedaudz katlu kodu. Tieši nodošana ref kā balsts novērš šo papildu kodu.

Labāka iekapsulēšana

Izmantojot “ForwardRef”, bērna komponentam jāapzinās, ka tā saņem ref un tai jāpievieno atbilstošais DOM elements. REF kā prop nodošana ļauj bērna komponentam nezināt par atsauci, uzlabojot iekapsulēšanu.

Vieglāka reakcijas veidošana

Ja jums ir jānovērš komponenta koks un jāmaina REF pielikuma punkts, ir vienkāršāk atjaunināt prop nosaukumu, nevis jāatjaunina “ForwardRef” zvans vairākās vietās. Tas padara CodeBase vairāk uzturējamu.

Saskaņā ar klases komponentiem

Klases komponentos atsauces tiek pievienotas, izmantojot `ref` prop, nevis ar īpašu“ ForwardRef ”mehānismu. Atļaujot refs kā rekvizītu rekvizītu komponentos, nodrošina konsekventāku API dažādās klases un funkciju komponentos.

Vieglāka tipa pārbaude

Izmantojot TypeScript, ir vienkāršāk ierakstīt pārbaudīt ref, kas nodots kā balsts, salīdzinot ar `ForwardRef` un` Refattributes` tipu izmantošanu. Prop tipu var secināt tieši no objekta “Ref`.

Rezumējot, jaunā refs kā rekvizītu funkcija padara React API intuitīvāku, samazina katlu plāksni, uzlabo iekapsulēšanu un padara kodu bāzi vairāk uzturējamu - tas viss uzlabo izstrādātāja efektivitāti, strādājot ar refs 19. reakcijā un ārpus tā [1] [3] [4].

Atsauces:
[1] https://www.copycat.dev/blog/react-forref/
[2] https://stackoverflow.com/questions/58578570/value-of-using-react-frwardref-vs-custom-ref-prop
[3] https://legacy.reactjs.org/docs/forwarding-refs.html
[4] https://www.reddit.com/r/reactjs/comments/1asgpy9/ref_as_a_prop_advance_beginner_question/
[5] https://blog.logrocket.com/why-you-s-should-use-refs-parable-in-production/
[6] https://react.dev/blog/2024/04/25/react-19-dgrade-guide
[7] https://dev.to/dalcio/react-performance-usestate-reducer-ref-theoretical-Summary-1bok
[8] https://www.freecodecamp.org/news/new-react-19-features/