Den nya funktionen i React 19 som tillåter passerade refs som rekvisita istället för att använda "framåtref" kan förbättra utvecklingseffektiviteten på några viktiga sätt:
Enklare och mer intuitivt API
Att passera Refs som vanliga rekvisita är ett mer naturligt och intuitivt API jämfört med att använda `framåtref '. Det anpassas bättre till Core React -principen om att skicka data ner i komponentträdet via rekvisita. Detta gör koden lättare att förstå och resonera om, särskilt för nybörjare.
reducerad pannplatta
Att använda "framåtref" kräver inpackning av barnkomponenten i ett "framåtref" -samtal och passerar "ref" som det andra argumentet till funktionskomponenten. Detta lägger till en del pannplattkod. Att passera domaren direkt som en prop eliminerar denna extra kod.
Bättre kapsling
När du använder "framåtref" måste barnkomponenten vara medveten om att den får en ref och måste fästa den till lämpligt DOM -element. Att passera ref som en prop tillåter barnkomponenten att förbli omedveten om domaren och förbättrar kapsling.
Enklare refactoring
Om du behöver refaktorera ett komponentträd och ändra ref -fästpunkten är det enklare att uppdatera prop -namnet snarare än att behöva uppdatera "ForwardRef" -samtalet på flera platser. Detta gör kodbasen mer underhållbar.
i överensstämmelse med klasskomponenter
I klasskomponenter bifogas Refs med hjälp av "Ref" -propen, inte via en speciell "framåtref" -mekanism. Att tillåta refs som rekvisita i funktionskomponenter ger ett mer konsekvent API över klass- och funktionskomponenter.
Enklare typkontroll
När du använder TypeScript är det enklare att skriva en referens som passerar som en rekvisita jämfört med att använda "framåtref" och "refattribut" -typer. Proptypen kan härledas direkt från objektet "Ref".
Sammanfattningsvis gör de nya Refs AS Props -funktionen React API mer intuitivt, minskar pannplattan, förbättrar inkapsling och gör kodbasen mer underhållbar - som alla förbättrar utvecklarens effektivitet när man arbetar med refs i React 19 och därefter [1] [3] [4].
Citeringar:[1] https://www.copycat.dev/blog/react-forwardref/
[2] https://stackoverflow.com/questions/58578570/value-of-sing-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-theoretical-summary-1bok
[8] https://www.freecodecamp.org/news/new-react-19-features/