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/