React.forwardRef ve custom ref prop kullanım değeri

React.forwardRef'in, tepki belgelerinden bir çocuk fonksiyonel bileşenine ref aktarmanın onaylanmış yolu olduğunu görüyorum:

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

Ancak, bunu sadece özel bir pervane geçmekle yapmanın avantajı nedir ?:

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

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

Aklıma gelen tek avantaj, belki refs için tutarlı bir API'ye sahip olmaktır, ancak başka bir avantajı var mı? Özel bir pervane geçirme, oluşturma söz konusu olduğunda farklı olmayı etkiler mi ve ek alanlara neden olur, elbette ref currentalanda değişebilir bir durum olarak saklandığı için değil mi?

Diyelim ki birden fazla referans (yani tbh, kod kokusunu gösterebilir, ama yine de) geçmek istediniz, o zaman görebildiğim tek çözüm customRef sahne kullanmak olacaktır.

Sanırım sorum forwardRefözel bir pervane üzerinde kullanmanın değeri nedir?

Hatta dokümanlar Tepki için daha esnek bir yaklaşım olarak özel ref pervane söz forwardRef:

React 16.2 veya daha düşük bir sürüm kullanıyorsanız veya ref yönlendirme tarafından sağlandığından daha fazla esnekliğe ihtiyacınız varsa, bu alternatif yaklaşımı kullanabilir ve farklı bir şekilde adlandırılmış prop olarak bir ref'yi açıkça iletebilirsiniz .

Bir de bulunmaktadır özü Dan Abramov onun avantajları hakkında yazıyor hangi:

• tüm React sürümleriyle uyumlu
• sınıf ve fonksiyon bileşenleri için çalışır
• birkaç kat derinlikte iç içe bir bileşene bir ref geçirmeyi basitleştirir

Eklemek isterim ki, her zamanki sahne olarak ref'leri geçmek, değişikliklere neden olmaz ve birden fazla ref için gitmenin yoludur. forwardRefAklıma gelmenin tek avantajı :

• DOM düğümleri, fonksiyonel ve sınıf bileşenleri için tek tip erişim API'sı (bundan bahsetmiştiniz)
• ref özniteliği sahne API'nızı şişirmez, örneğin TypeScript ile tür sağlıyorsanız

Özel bir pervane geçirme, oluşturma söz konusu olduğunda farklı olmayı etkiler ve ek oluşturma işlemlerine neden olur mu?

Bir satır içi geri çağrı ref işlevini prop olarak aşağı aktarırsanız, bir ref potansiyel olarak yeniden oluşturmayı tetikleyebilir . Ama yine de bunu sınıf örneği yöntemi olarak tanımlamak veya benzeri bir notla tanımlamak daha iyi bir fikirdiruseCallback .

RefReactbileşenlerde standart bir özelliktir .

Ek işlevsellik sağlamak için diğer bileşenleri saran bazı bileşenler, refsarılmış bileşene başvurmak için kullanılır ve bileşenin refözelliğe sahip olmasını bekler .

Bir bileşenin, refözelliğin diğer bileşenler ve kitaplıklar ile uyumlu olması daha iyidir .

İşlev bileşenleri "ref" özelliğine sahip olamaz ve forwardRefbunun yerine refözellik sağlamak için kullanılmalıdır .