giá trị của việc sử dụng React.forwardRef so với prop ref tùy chỉnh

Tôi thấy rằng React.forwardRef dường như là cách bị xử phạt khi chuyển một ref cho một thành phần chức năng con, từ các tài liệu phản ứng:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Tuy nhiên, lợi thế của việc này là gì khi chỉ đơn giản là vượt qua một chỗ dựa tùy chỉnh?:

const FancyButton = ({ innerRef }) => (
  <button ref={innerRef} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;

Lợi thế duy nhất tôi có thể nghĩ đến là có thể có một api phù hợp cho các ref, nhưng có lợi thế nào khác không? Việc vượt qua một prop tùy chỉnh có ảnh hưởng đến sự khác biệt khi kết xuất và gây ra kết xuất bổ sung, chắc chắn không phải là ref được lưu trữ dưới dạng trạng thái có thể thay đổi trong currenttrường không?

Ví dụ, bạn muốn vượt qua nhiều ref (mà tbh, có thể chỉ ra mùi mã, nhưng vẫn vậy), thì giải pháp duy nhất tôi có thể thấy là sử dụng các đạo cụ customRef.

Tôi đoán câu hỏi của tôi là giá trị của việc sử dụng forwardReftrên một prop tùy chỉnh là gì?

Ngay cả các tài liệu React cũng đề cập đến prop ref tùy chỉnh như một cách tiếp cận linh hoạt hơn để forwardRef:

Nếu bạn sử dụng React 16.2 hoặc thấp hơn hoặc nếu bạn cần linh hoạt hơn so với cung cấp ref , bạn có thể sử dụng phương pháp thay thế này và chuyển một cách rõ ràng một ref như một prop có tên khác .

Ngoài ra còn có một ý chính , trong đó Dan Abramov viết về những lợi thế của nó:

• tương thích với tất cả các phiên bản React
• làm việc cho các thành phần lớp và chức năng
• đơn giản hóa việc chuyển một tham chiếu đến một thành phần lồng nhau sâu vài lớp

Tôi sẽ nói thêm rằng, việc chuyển các ref như các đạo cụ thông thường không gây ra thay đổi đột phá và là cách để thực hiện nhiều ref. Những lợi thế duy nhất forwardRefđến với tâm trí của tôi là:

• API truy cập thống nhất cho các nút DOM, các thành phần chức năng và lớp (bạn đã đề cập rằng)
• ref thuộc tính không làm phồng API đạo cụ của bạn, ví dụ: nếu bạn cung cấp các loại với TypeScript

Việc vượt qua một prop tùy chỉnh có ảnh hưởng đến sự khác biệt khi kết xuất và gây ra kết xuất bổ sung không?

Một ref có khả năng kích hoạt kết xuất lại nếu bạn chuyển một hàm ref gọi lại nội tuyến dưới dạng prop. Nhưng nó là một ý tưởng tốt hơn anyway để xác định nó như là phương pháp lớp dụ hoặc thông qua một số memoization như useCallback.

Reflà một tài sản tiêu chuẩn trong Reactcác thành phần.

Một số thành phần bao bọc các thành phần khác để cung cấp chức năng bổ sung, sử dụng refđể chỉ thành phần được bọc và mong đợi rằng thành phần đó có thuộc reftính.

Nó là tốt hơn cho một thành phần để có reftài sản để tương thích với các thành phần và thư viện khác.

Các thành phần chức năng không thể có thuộc tính "ref" và phải sử dụng forwardRefthay thế để cung cấp thuộc reftính.