☰

React.forwardRef とカスタム ref プロパティの使用の価値 質問する

tag-icon • tag-icon javascript reactjs performance
React.forwardRef とカスタム ref プロパティの使用の価値 質問する

React のドキュメントによると、これはReact.forwardRefref を子機能コンポーネントに渡すための認可された方法のようです。

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 があることですが、他に利点はありますか? カスタム プロパティを渡すと、レンダリングの際の差分処理に影響し、追加のレンダリングが発生しますが、ref はフィールド内の可変状態として保存されるため、そのようなことは絶対にありませんcurrent。

たとえば、複数の参照を渡したい場合 (正直に言うと、コードの臭いがするかもしれませんが)、私が見つけた唯一の解決策は、customRef プロパティを使用することです。

forwardRef私の質問は、カスタム プロップを使用する価値は何かということです。

ベストアンサー1

平Reactドキュメントより柔軟なアプローチとして、カスタム ref プロパティについて説明しますforwardRef。

React 16.2以下を使用している場合、またはref転送よりも柔軟性が高い、この代替アプローチを使用して、明示的に異なる名前のプロパティとしてのref。

また、要旨その中で、ダン・アブラモフはその利点について次のように書いています。

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

通常のpropsとしてrefsを渡すことは、重大な変更複数の参照を行う場合はこれが最適な方法です。forwardRef私が思いつく唯一の利点は次のとおりです。

  • DOM ノード、関数コンポーネント、クラス コンポーネントへの統一アクセス API (おっしゃるとおりです)
  • ref属性はprops APIを肥大化させません。例えば、TypeScriptで型を提供する場合などです。

カスタム プロパティを渡すと、レンダリング時の差分に影響し、追加のレンダリングが発生しますか?

refは、インラインを渡すと再レンダリングをトリガーする可能性があります。コールバック参照機能としてプロップとしてダウン。しかし、それはより良いアイデアとにかく、クラスインスタンスメソッドとして定義するか、またはのようなメモ化を介して定義しますuseCallback。

おすすめ記事