nilai menggunakan React.forwardRef vs prop ref kustom

Saya melihat bahwa React.forwardRef tampaknya menjadi cara yang disetujui untuk meneruskan referensi ke komponen fungsional anak, dari dokumen reaksi:

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>;

Namun, apa keuntungan melakukan ini daripada hanya melewati prop kustom ?:

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

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

Satu-satunya keuntungan yang dapat saya pikirkan adalah mungkin memiliki api yang konsisten untuk referensi, tetapi apakah ada keuntungan lain? Apakah melewati props kustom memengaruhi perbedaan ketika harus merender dan menyebabkan perenderan tambahan, tentu saja tidak karena ref disimpan sebagai status yang bisa berubah di currentbidang?

Katakanlah misalnya Anda ingin melewatkan banyak referensi (yang tbh, mungkin mengindikasikan bau kode, tetapi tetap saja), maka satu-satunya solusi yang dapat saya lihat adalah menggunakan alat peraga customRef.

Saya kira pertanyaan saya adalah apa nilai menggunakan forwardReflebih dari prop kustom?

Bahkan Bereaksi dokumen menyebutkan alat referensi kustom sebagai pendekatan yang lebih fleksibel untuk forwardRef:

Jika Anda menggunakan Bereaksi 16.2 atau lebih rendah, atau jika Anda membutuhkan lebih banyak fleksibilitas daripada yang disediakan oleh penerusan ref , Anda dapat menggunakan pendekatan alternatif ini dan secara eksplisit memberikan referensi sebagai prop yang berbeda namanya .

Ada juga intinya , di mana Dan Abramov menulis tentang kelebihannya:

• kompatibel dengan semua versi Bereaksi
• bekerja untuk komponen kelas dan fungsi
• menyederhanakan melewati referensi ke komponen bersarang beberapa lapisan dalam

Saya akan menambahkan, bahwa melewati referral sebagai alat peraga biasa tidak menyebabkan perubahan yang melanggar dan merupakan cara untuk pergi untuk beberapa referral. Satu-satunya keuntungan forwardRefdatang ke pikiran saya adalah:

• API akses seragam untuk komponen DOM, komponen fungsional dan kelas (Anda sebutkan itu)
• ref atribut tidak mengasapi API alat peraga Anda, misalnya jika Anda memberikan jenis dengan TypeScript

Apakah melewati props khusus memengaruhi perbedaan ketika harus merender dan menyebabkan perenderan tambahan?

Ref berpotensi memicu re-render jika Anda melewatkan fungsi ref callback inline turun sebagai prop. Tapi itu ide yang lebih baik untuk mendefinisikannya sebagai metode instance kelas atau melalui beberapa memoisasi seperti useCallback.

Refadalah properti standar dalam Reactkomponen.

Beberapa komponen yang membungkus komponen lain untuk menyediakan fungsionalitas tambahan, gunakan refuntuk merujuk ke komponen yang dibungkus dan berharap bahwa komponen tersebut memiliki refproperti.

Lebih baik komponen untuk memiliki refproperti agar kompatibel dengan komponen dan pustaka lainnya.

Komponen fungsi tidak dapat memiliki properti "ref" dan forwardRefsebaliknya harus menggunakan untuk menyediakan refproperti.