Nová funkce v React 19, která umožňuje předávání refs jako rekvizity namísto použití `forwardref` může zlepšit účinnost rozvoje několika klíčovými způsoby:
Jednodušší a intuitivnější API
Předávání odkazů jako běžných rekvizit je přirozenější a intuitivnější API ve srovnání s použitím `ForwardRef`. Lepší se vyrovná s principem jádra React při předávání dat po stromu komponent pomocí rekvizit. To usnadňuje pochopení kódu a rozumu, zejména pro začátečníky.
Snížená kotle
Použití `ForwardRef` vyžaduje zabalení dítěte pro dítě do volání„ ForwardRef “a předávání` ref “jako druhého argumentu ke složce funkce. Tím se přidá nějaký kód kotle. Předávání REF přímo jako rekvizita eliminuje tento další kód.
Lepší zapouzdření
Při použití `ForwardRef` si musí dětská komponenta uvědomit, že přijímá REF a musí jej připojit k příslušnému prvku DOM. Předávání REF jako podpěry umožňuje, aby dětská komponenta zůstala nevědomá o REF, což zlepšilo zapouzdření.
Snadnější refaktoring
Pokud potřebujete refaktorovat strom komponent a změnit bod připojení REF, je jednodušší aktualizovat název podpěry, než aby musel aktualizovat volání „ForwardRef“ na více místech. Díky tomu je Codebase udržovatelnější.
V souladu s komponenty třídy
V komponentách třídy jsou odkazy připojeny pomocí podpěry „Ref“, nikoli pomocí speciálního mechanismu `ForwardRef`. Povolení REF jako rekvizit ve funkčních komponentách poskytuje konzistentnější API napříč komponenty třídy a funkcí.
Snadnější kontrola typu
Při používání strojového písmenu je jednodušší prověřování kontroly ref předaného jako rekvizity ve srovnání s používáním typů `ForwardRef` a` Refattributes`. Typ prop lze odvodit přímo z objektu „Ref“.
Stručně řečeno, nové funkce Refs As reps činí API React intuitivnější, snižuje kotli, zlepšuje zapouzdření a zvyšuje udržovatelnou základnu - to vše zlepšuje účinnost vývojáře při práci s odkazy v React 19 a dále [1] [3] [4].
Citace:[1] https://www.copycat.dev/blog/react-forwardref/
[2] https://stackoverflow.com/questions/58578570/Value-of-using-reactrewardref-vs-ustom-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-should-use-refs-paringly in-coduction/
[6] https://react.dev/blog/2024/04/25/react-19-pgrade-guide
[7] https://dev.to/dalcio/react-performance-usestate-redur-ref-theoretical-summary-1bok
[8] https://www.freecodecamp.org/news/new-react-19-features/