ref新老バージョンのアプリケーション

一、はじめに#

Refs はコンピュータ上で弾力性ファイルシステム（Resilient File System、略称 ReFS）と呼ばれます。

React の Refs は、DOM ノードまたは render メソッドで作成された React 要素にアクセスする方法を提供します。

本質的には、ReactDOM.render() が返すコンポーネントインスタンスであり、コンポーネントをレンダリングする場合はコンポーネントインスタンスが返され、dom をレンダリングする場合は具体的な dom ノードが返されます。

二、使用方法#

ref を作成する方法は 3 つあります：

文字列を渡す場合、this.refs. で渡された文字列の形式で対応する要素を取得します。
オブジェクトを渡す場合、オブジェクトは React.createRef () で作成され、作成したオブジェクトに current プロパティが存在する場合、対応する要素です。
関数を渡す場合、この関数は DOM がマウントされるときにコールバックされ、この関数には要素オブジェクトが渡されます。自分で保存して使用する場合は、以前に保存した要素オブジェクトを直接取得します。
フックを渡す場合、フックは useRef () で作成され、使用する場合は生成したフックオブジェクトの current プロパティが対応する要素です。

文字列を渡す#

対応する要素またはコンポーネントのref属性にのみ必要です

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="myref" />;
  }
}

現在のノードにアクセスする方法は次のとおりです：

this.refs.myref.innerHTML = "hello";

オブジェクトを渡す#

refs は React.createRef() で作成され、その後 ref 属性が React 要素に追加されます。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

ref が render 内の要素に渡されると、そのノードへの参照は ref の current プロパティでアクセスできます。

const node = this.myRef.current;

関数を渡す#

ref が関数に渡される場合、レンダリングプロセス中にコールバック関数の引数に要素オブジェクトが渡され、インスタンスを使用してオブジェクトを保存します。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={element => this.myref = element} />;
  }
}

ref オブジェクトを取得するには、以前に保存したオブジェクトを使用するだけです。

const node = this.myref

フックを渡す#

useRef を使用して ref を作成し、全体の使用方法は React.createRef と同じです。

function App(props) {
  const myref = useRef()
  return (
    <>
      <div ref={myref}></div>
    </>
  )
}

ref 属性を取得する方法も、hook オブジェクトの current プロパティを使用します。

const node = myref.current;

上記の 3 つの場合、ref 属性はネイティブの HTML 要素に使用されます。ref が設定されたコンポーネントがクラスコンポーネントである場合、ref オブジェクトはコンポーネントのマウントインスタンスを受け取ります。

注意点として、関数コンポーネントでは ref 属性を使用できないため、インスタンスが存在しないためです。

三、応用シーン#

特定の場合には、refs を使用してコンポーネントを更新することがありますが、この方法は推奨されません。子要素を再レンダリングするためには、通常は props と state を使用します。

refs を過剰に使用すると、コンポーネントのインスタンスまたは DOM 構造が公開され、コンポーネントのカプセル化の原則に違反します。

たとえば、Dialog コンポーネントで open() メソッドと close() メソッドを公開するのは避け、代わりに isOpen プロパティを渡すことが最善です。

ただし、次のシナリオでは refs を使用すると非常に便利です：

DOM 要素のフォーカス制御、コンテンツの選択、制御
DOM 要素の内容の設定とメディア再生
DOM 要素の操作とコンポーネントインスタンスの操作
サードパーティの DOM ライブラリの統合