Нова функція в React 19, яка дозволяє передавати Refs як реквізит замість використання `forwordRef`, може підвищити ефективність розвитку кількома ключовими способами:
простіший та інтуїтивний API
Проведення рефів як регулярних реквізитів є більш природним та інтуїтивним API порівняно з використанням `forwordRef`. Він краще вирівнюється з принципом реагування основного реагування даних вниз по дереву компонентів через реквізит. Це робить код простішим для розуміння та міркування, особливо для початківців.
Зменшена котня
Використання `forwordRef` вимагає загортання дочірнього компонента в` forwordRef` Call і передаючи `ref` як другий аргумент до компонента функції. Це додає коду котла. Проходження Ref безпосередньо як опора виключає цей додатковий код.
краща інкапсуляція
Використовуючи `ForwardRef`, дитячий компонент повинен усвідомлювати, що він отримує реф і повинен приєднати його до відповідного елемента DOM. Проходження Ref як PORP дозволяє дочірній компоненту залишатися невідомою про реф, поліпшення інкапсуляції.
легше рефакторинг
Якщо вам потрібно рефактор на компонентне дерево та змінити точку вкладення Ref, простіше оновити ім'я опори, а не оновлювати дзвінок `forwordRef 'у декількох місцях. Це робить кодову базу більш ремонтною.
Відповідно до компонентів класу
У компонентах класу Ref додаються за допомогою `ref` prop, а не за допомогою спеціального механізму` forwardref`. Дозвіл на Refs як реквізити функціональних компонентів забезпечує більш послідовний API в компонентах класових та функціональних компонентів.
простіша перевірка типу
Використовуючи TypeScript, простіше вводити перевірити реф, передану як опору порівняно з використанням типів `forwordRef` та` refattributes`. Тип опори можна зробити безпосередньо з об'єкта `ref`.
Підводячи підсумок, нова функція Refs як реквізит робить API React більш інтуїтивно зрозумілим, зменшує котельну плиту, покращує інкапсуляцію та робить базу коду більш реконструктивною - все з яких підвищує ефективність розробника під час роботи з Ref в React 19 і за її межами [1] [3] [4].
Цитати:[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/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-sarphy-production/
[6] https://react.dev/blog/2024/04/25/react-19-upgrade-guide
[7] https://dev.to/dalcio/react-performance-usestate-reducer-ref-thoretical-summary-1bok
[8] https://www.freecodecamp.org/news/new-react-19-features/