Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Hur förbättrar den nya ref som en prop -funktion utvecklingseffektiviteten


Hur förbättrar den nya ref som en prop -funktion utvecklingseffektiviteten


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/