Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Làm thế nào để ref mới là một tính năng prop cải thiện hiệu quả phát triển


Làm thế nào để ref mới là một tính năng prop cải thiện hiệu quả phát triển


Tính năng mới trong React 19 cho phép chuyển giới thiệu dưới dạng đạo cụ thay vì sử dụng `forwardref` có thể cải thiện hiệu quả phát triển theo một vài cách chính:

API đơn giản và trực quan hơn

Vượt qua các ref như các đạo cụ thông thường là API tự nhiên và trực quan hơn so với sử dụng `forwardref`. Nó phù hợp hơn với nguyên tắc phản ứng cốt lõi là truyền dữ liệu xuống cây thành phần thông qua đạo cụ. Điều này làm cho mã dễ hiểu hơn và lý do, đặc biệt là cho người mới bắt đầu.

Giảm nồi hơi

Sử dụng `forwardref` yêu cầu gói thành phần con trong cuộc gọi` forwardref` và chuyển `ref` làm đối số thứ hai cho thành phần chức năng. Điều này thêm một số mã nồi hơi. Vượt qua giới thiệu trực tiếp như một prop giúp loại bỏ mã bổ sung này.

Đóng gói tốt hơn

Khi sử dụng `forwardref`, thành phần con cần lưu ý rằng nó đang nhận được một ref và cần gắn nó vào phần tử DOM thích hợp. Vượt qua ref như một prop cho phép thành phần trẻ em không biết về ref, cải thiện đóng gói.

Tái cấu trúc dễ dàng hơn

Nếu bạn cần tái cấu trúc một cây thành phần và thay đổi điểm đính kèm ref, thì việc cập nhật tên prop sẽ đơn giản hơn là phải cập nhật cuộc gọi `forwardref` ở nhiều nơi. Điều này làm cho cơ sở mã có thể duy trì hơn.

Phù hợp với các thành phần lớp

Trong các thành phần của lớp, các ref được gắn bằng cách sử dụng prop `ref`, không thông qua cơ chế` priventref` đặc biệt. Cho phép refs làm đạo cụ trong các thành phần chức năng cung cấp API nhất quán hơn trên các thành phần của lớp và chức năng.

kiểm tra loại dễ dàng hơn

Khi sử dụng TypeScript, việc gõ kiểm tra lại được truyền dưới dạng prop đơn giản hơn so với sử dụng các loại `forwardref` và` refattribution`. Loại prop có thể được suy ra trực tiếp từ đối tượng `ref`.

Tóm lại, tính năng Refs AS mới làm cho API phản ứng trực quan hơn, giảm tấm nồi hơi, cải thiện đóng gói và làm cho cơ sở mã có thể duy trì hơn - tất cả đều cải thiện hiệu quả của nhà phát triển khi làm việc với Refs trong React 19 và hơn nữa [1] [3] [4].

Trích dẫn:
[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
.
.
[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-te