React.forwardRefとカスタム参照プロパティを使用することの値

React.forwardRefは、react docsから、refを子機能コンポーネントに渡す認可された方法のように見えます。

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

ただし、カスタムプロップを単に渡すよりも、これを行う利点は何ですか。

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

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

私が考えることができる唯一の利点は、おそらくrefに一貫したAPIがあることですが、他に利点はありますか？カスタムプロップを渡すと、レンダリングに関して差分に影響を与え、追加のレンダリングが発生しcurrentますか。確かに、refはフィールドに変更可能な状態として格納されているためではありませんか？

たとえば、複数の参照を渡したい場合（tbhはコードの臭いを示す可能性がありますが、それでもなお）とすると、私が確認できる唯一の解決策は、customRefプロパティを使用することです。

私の質問はforwardRef、カスタム小道具を介して使用することの価値は何ですか？

Reactのドキュメントでさえ、へのより柔軟なアプローチとしてカスタムref プロパティに言及していますforwardRef。

React 16.2 以前を使用している場合、またはref forwardingよりも高い柔軟性が必要な場合は、この代替アプローチを使用して、別の名前のpropとしてrefを明示的に渡すことができます。

Dan Abramovがその利点について書いている要点もあります。

• すべてのReactバージョンと互換性があります
• クラスおよび関数コンポーネントで機能します
• ネストされたコンポーネントへの参照の受け渡しを簡素化します

さらに、通常の小道具として参照を渡すことは重大な変更を引き起こさず、複数の参照を取得する方法であると付け加えます。forwardRef私の頭に浮かぶことの唯一の利点は：

• DOMノード、機能コンポーネント、およびクラスコンポーネントのユニフォームアクセスAPI（あなたが言った）
• ref TypeScriptで型を提供する場合など、属性が小道具APIを膨張させない

カスタムプロップを渡すと、レンダリングに関して差分に影響し、追加のレンダリングが発生しますか？

インラインコールバックref関数をpropとして渡すと、refが再レンダリングをトリガーする可能性があります。しかし、とにかくそれをクラスインスタンスメソッドとして定義するか、などのメモを使用して定義することをお勧めしますuseCallback。

RefReactコンポーネントの標準プロパティです。

他のコンポーネントをラップして追加機能を提供する一部のコンポーネントは、ラップrefされたコンポーネントを参照し、コンポーネントにrefプロパティがあることを期待するために使用します。

コンポーネントには、ref他のコンポーネントおよびライブラリと互換性のあるプロパティを持たせることをお勧めします。

関数コンポーネントは「ref」プロパティを持つことができず、forwardRef代わりにrefプロパティを提供するために使用する必要があります。