Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Cum îmbunătățește noul Ref ca caracteristică de propriu eficiența dezvoltării


Cum îmbunătățește noul Ref ca caracteristică de propriu eficiența dezvoltării


Noua caracteristică din React 19 care permite trecerea arbitruilor ca recuzită în loc să utilizeze `ForwardRef` poate îmbunătăți eficiența dezvoltării în câteva moduri cheie:

API mai simplu și mai intuitiv

Trecerea arbitrului ca recuzită obișnuită este o API mai naturală și intuitivă în comparație cu utilizarea „ForwardRef”. Se aliniază mai bine cu principiul reacției de bază de trecere a datelor în jos arborele componentelor prin recuzită. Acest lucru face ca codul să fie mai ușor de înțeles și de rațiune, în special pentru începători.

Placă de cazan redusă

Utilizarea `ForwardRef` necesită înfășurarea componentei copilului într -un apel` ForwardRef` și trecerea `Ref` ca al doilea argument la componenta funcțională. Acest lucru adaugă un cod de placă de cazan. Trecerea Ref direct ca un propriu elimină acest cod suplimentar.

o încapsulare mai bună

Când utilizați `ForwardRef`, componenta copilului trebuie să fie conștientă de faptul că primește un ref și trebuie să -l atașeze la elementul DOM corespunzător. Trecerea Ref ca propriu permite componentei copilului să rămână neștiind REF, îmbunătățind încapsularea.

Refactoring mai ușor

Dacă aveți nevoie să refactoriți un arbore component și să schimbați punctul de atașare REF, este mai simplu să actualizați numele de prop, mai degrabă decât să trebuie să actualizați apelul `ForwardRef` în mai multe locuri. Acest lucru face ca codbase să fie mai menținut.

în concordanță cu componentele clasei

În componentele clasei, Ref -urile sunt atașate folosind „Ref` Prop, nu printr -un mecanism special„ ForwardRef ”. Permiterea ref -urilor ca recuzite în componentele funcționale oferă o API mai consistentă în componentele clasei și funcției.

Verificare mai ușoară a tipului

Atunci când utilizați TypeScript, este mai simplu să verificați un refugiu transmis ca un propriu în comparație cu utilizarea tipurilor de `ForwardRef` și` RefatTributes`. Tipul de propuneri poate fi dedus direct din obiectul `ref`.

În rezumat, noile caracteristici de referință ca recuzită face ca API -ul React să fie mai intuitiv, reduce placa de cazan, îmbunătățește încapsularea și face ca codul de cod mai menținut - toate acestea îmbunătățesc eficiența dezvoltatorului atunci când lucrează cu Refs în React 19 și nu numai [1] [3] [4].

Citări:
[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/
]
[6] https://react.dev/blog/2024/04/25/react-19-upgrade-guide
[7] https://dev.to/dalcio/react-performance-usestate-reducer-ref-heoretical-summary-1bok
[8] https://www.freecodecamp.org/news/new-react-19-features/