Den nye funktion i React 19, der tillader forbipasserende refs som rekvisitter i stedet for at bruge `fremadrettet 'kan forbedre udviklingseffektiviteten på nogle få nøgle måder:
enklere og mere intuitiv API
At videregive refs som regelmæssige rekvisitter er en mere naturlig og intuitiv API sammenlignet med at bruge `fremadrettet '. Det tilpasser sig bedre med det centrale reaktionsprincip om at videregive data ned ad komponenttræet via rekvisitter. Dette gør koden lettere at forstå og resonnere om, især for begyndere.
reduceret kedelplade
Brug af 'ForwardRef' kræver indpakning af barnekomponenten i et 'fremadrettet' opkald og videregivelse af 'Ref' som det andet argument til funktionskomponenten. Dette tilføjer en vis kedelpladekode. At videregive dommeren direkte som en prop eliminerer denne ekstra kode.
Bedre indkapsling
Når man bruger `fremadrettet ', skal barnets komponent være opmærksom på, at den modtager en ref og skal fastgøre den til det relevante DOM -element. Ved at passere dommeren som en prop giver barnets komponent mulighed for at forblive uvidende om REF og forbedre indkapslingen.
lettere refactoring
Hvis du har brug for at refaktorere et komponenttræ og ændre refliteringspunktet, er det enklere at opdatere propnavnet i stedet for at skulle opdatere 'fremadrettet' opkald flere steder. Dette gør kodebasen mere vedligeholdelig.
I overensstemmelse med klassekomponenter
I klassekomponenter er Refs fastgjort ved hjælp af 'Ref' -propen, ikke via en speciel 'fremadrettet mekanisme. Tilladelse af refs som rekvisitter i funktionskomponenter giver et mere konsistent API på tværs af klasse- og funktionskomponenter.
lettere type kontrol af type
Når du bruger TypeScript, er det enklere at skrive en Ref, der er bestået som en rekvisit, sammenlignet med at bruge `fremadrettet 'og` refattributter' -typer. Prop -typen kan udledes direkte fra `Ref '-objektet.
Sammenfattende gør de nye refs som rekvisitterfunktion React API mere intuitiv, reducerer kedelpladen, forbedrer indkapsling og gør kodebasen mere vedligeholdelig - alt sammen forbedrer udviklerens effektivitet, når man arbejder med REF'er i React 19 og videre [1] [3] [4].
Citater:[1] https://www.copycat.dev/blog/react-forwardref/
[2] https://stackoverflow.com/questions/58578570/value-of-ussing-react-forwardref-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/
)
[6] https://react.dev/blog/2024/04/25/react-19-upgrade-guide
[7] https://dev.to/dalcio/react-performance-usestate-reducer-ref-teoretical-mummary-1bok
[8] https://www.freecodecamp.org/news/new-react-19-features/