[解決済み] React.forwardRefの使用価値とカスタムrefプロップの使用価値

疑問点

私は、次のように考えています。 React.forwardRef は、reactのドキュメントから、子機能コンポーネントに参照を渡すための公認の方法であるように見えます。

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

しかし、単にカスタムpropを渡すよりも、このようにすることの利点は何でしょうか？

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

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

私が思いつく唯一の利点は、refに対して一貫したapiを持つことかもしれませんが、他に利点はあるのでしょうか？カスタムプロパティを渡すと、レンダリング時の差分に影響を与え、追加のレンダリングが発生するのでしょうか？ current フィールドに変更可能な状態として保存されるからです。

例えば、複数の参照先を渡したい場合（実際、コードの匂いを示すかもしれませんが、それでも）、私が見ることができる唯一の解決策は、customRef プロップを使用することでしょう。

私の疑問は forwardRef を使うことの価値は何でしょうか？

どのように解決するのですか？

でも Reactのドキュメント に対するより柔軟なアプローチとして、カスタム ref プロップに言及しています。 forwardRef :

React 16.2以下を使用している場合、あるいは による転送よりも柔軟性がある が必要な場合、この代替アプローチを使うことができ、明示的に を別の名前のプロップとして渡すことができます。 .

また 要旨 で、Dan Abramov がその利点について書いています。

• すべてのReactのバージョンと互換性がある
• クラスとファンクションコンポーネントで動作する
• 数層深いネストされたコンポーネントへの参照渡しを簡素化します。

私は、通常のプロップとしてrefを渡しても、そのrefが の変更 を引き起こすことはなく、複数のrefのために行くべき方法であることを付け加えておきます。の唯一の利点は forwardRef が頭に浮かぶのは

• DOM ノード、関数、およびクラス コンポーネントのための統一されたアクセス API (あなたはこれについて言及しました)
• ref 属性は、例えば TypeScript で型を提供する場合、props API を肥大化させません。

カスタムプロップを渡すと、レンダリング時に差分が影響し、追加のレンダリングが発生するのでしょうか？

ref は、インラインの コールバック参照 関数を prop として渡すと、再描画を引き起こす可能性があります。しかし、それは より良いアイデア のようにクラスインスタンスのメソッドとして定義するか、メモ化するのが良いでしょう。 useCallback .