De nieuwe functie in React 19 die het doorgeven van refs als rekwisieten mogelijk maakt in plaats van het gebruik van `forwardref` kan de ontwikkelingsefficiëntie op een paar belangrijke manieren verbeteren:
eenvoudiger en meer intuïtieve API
Refs doorgeven als reguliere rekwisieten is een meer natuurlijke en intuïtieve API in vergelijking met het gebruik van `forwardref`. Het komt beter uit met het kernreactprincipe van het doorgeven van gegevens door de componentboom via rekwisieten. Dit maakt de code gemakkelijker te begrijpen en te redeneren, vooral voor beginners.
Verminderde boilerplate
Het gebruik van `forwardref` vereist het in een` forwardref' -aanroep om te wikkelen en de 'ref' door te geven als het tweede argument aan de functiecomponent. Dit voegt wat boilerplate -code toe. De scheidsrechter rechtstreeks doorgeven als een prop elimineert deze extra code.
Betere inkapseling
Bij het gebruik van `forwardref` moet de onderdeel van het kind zich ervan bewust zijn dat hij een ref ontvangt en deze moet bevestigen aan het juiste DOM -element. Door de REF als een prop door te geven, kan de onderdeel van het kind zich niet bewust blijven van de REF, waardoor inkapseling wordt verbeterd.
gemakkelijker refactoring
Als u een componentboom moet refacteren en het REF -bijlage -punt moet wijzigen, is het eenvoudiger om de propnaam bij te werken in plaats van de 'forwardref' -oproep op meerdere plaatsen bij te werken. Dit maakt de codebase meer onderhoudbaar.
consistent met klasse componenten
In klassencomponenten zijn REF's bijgevoegd met behulp van de `Ref` -prop, niet via een speciaal` forwardref' -mechanisme. Het toestaan van refs als rekwisieten in functiecomponenten biedt een meer consistente API tussen klasse en functiecomponenten.
eenvoudiger typecontrole
Bij gebruik van typescript is het eenvoudiger om te typen dat een REF wordt aangenomen als een prop vergeleken met het gebruik van `forwardref` en` Refattributes` typen. Het prop -type kan rechtstreeks worden afgeleid uit het `Ref` -object.
Samenvattend maakt de nieuwe refs als rekwisietfunctie de React API intuïtiever, vermindert ketelplate, verbetert inkapseling en maakt de codebase meer onderhoudbaar - die allemaal de efficiëntie van de ontwikkelaar verbetert bij het werken met REF's in React 19 en verder [1] [3] [4].
Citaten:[1] https://www.copycat.dev/blog/react-forwardref/
[2] https://stackoverflow.com/questions/58578570/value-of-using-react-forwardref-vs-custom-ref-prop
[3] https://legacy.reactjs.org/docs/forward-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-schoul-use-refs-sparly- in-productie/
[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/