ReactにおけるRefの使い方の詳細

この例は、ReactにおけるRefの使用方法を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
ReactにおけるRefの使用React v 16.6.3
典型的なReactデータストリームにおいて、propsは親コンポーネントとそのサブコンポーネントが相互作用する唯一の方法である。サブアイテムを修正するには、new propsを使って再提示してください。しかし、場合によっては、サブアイテムは、典型的なデータストリームの外で強制的に変更される必要がある。修正するサブアイテムは、Reactコンポーネントの例であってもよく、DOM要素であってもよい。これらの2つの場合には、Reactはいずれもapiを提供している。
いつrefsを使いますか
refsにはいくつかの優れた用例があります。

1.テキスト選択またはメディア再生。

.必要な位置にあるアニメーションをトリガします。

.第三者のDOMライブラリと統合する。

refsを宣言的に実行できる任意の動作に使用することを避ける。
*Refsを過度に使用しない
旧バージョンAPI：文字列参照
Reactを使用したことがあるなら、ref属性は文字列「textInput」であり、DOMノードはthis.refs.textInputにアクセスされます。文字列参照に問題がありますので、使用しないようにお勧めします。将来のバージョンから削除される可能性があります。
折り返し参照
コンポーネントがインストールされると、ReactはDOM要素を使ってrefコールを行い、アンインストール時にnullを呼び出します。
component DidMountまたはcomponent DidUpdateトリガ前に、Refsは最新のものであることを保証します。

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);

 this.textInput = null;

 this.setTextInputRef = element => {
  this.textInput = element;
 };

 this.focusTextInput = () => {
  // Focus the text input using the raw DOM API
  if (this.textInput) this.textInput.focus();
 };
 }

 componentDidMount() {
 // autofocus the input on mount
 this.focusTextInput();
 }

 render() {
 // Use the `ref` callback to store a reference to the text input DOM
 // element in an instance field (for example, this.textInput).
 return (
  <div>
  <input
   type="text"
   ref={this.setTextInputRef}
  />
  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

refs例--クリックしてinputフォーカスを取得します。

class Example extends React.Component {
 handleClick() {
 //       DOM API     
 this.refs.myInput.focus
 ();
 }
 render() {
 //        DOM  ，ref               this.refs
 return (
  <div>
  <input type="text" ref="myInput" />
  <input
   type="button"
   value="         "
   onClick={this.handleClick.bind(this)}
  />
  </div>
 );
 }
}

React.create Refを使う()
React.create Ref（）React 16.3に導入されたAPI。初期バージョンのReactを使用している場合は、フィードバック参照を使用することをお勧めします。
React.create Refを作成します()
Refsは属性を用いて作成され、React.create Ref()はReact要素にref属性を付加する。コンポーネントを構成するとき、Refsは典型的に、コンポーネント全体で参照できるように、インスタンス属性に割り当てられる。

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

アクセス
refが要素に渡されると、ノードへの参照は、currentrefの属性においてアクセスできるようになる。

const node = this.myRef.current;

refの値はノードのタイプによって異なります。

は、refHTML要素にこの属性を使用すると、refが構築関数で作成した属性は、React.create Ref（）受信した最下層DOM要素をそのcurrent属性とする。

は、refカスタムクラスコンポーネント上でこの属性を使用すると、このrefオブジェクトは、受信コンポーネントのインストール済みのインスタンスをそのcurrentとする。

これらの属性は、実例がないので、関数コンポーネントではrefを使用できないかもしれません。

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);
 // create a ref to store the textInput DOM element
 this.textInput = React.createRef();
 this.focusTextInput = this.focusTextInput.bind(this);
 }

 focusTextInput() {
 // Explicitly focus the text input using the raw DOM API
 // Note: we're accessing "current" to get the DOM node
 this.textInput.current.focus();
 }

 render() {
 // tell React that we want to associate the <input> ref
 // with the `textInput` that we created in the constructor
 return (
  <div>
  <input
   type="text"
   ref={this.textInput} />

  <input
   type="button"
   value="Focus the text input"
   onClick={this.focusTextInput}
  />
  </div>
 );
 }
}

currentはコンポーネントをインストールすると、Reactはこの属性にDOM要素を割り当て、nullはアンインストール時にそれを割り当てます。ref更新が発生する前にcomponent DidMountまたはcomponent DidUpdateライフサイクル方法。
関数コンポーネントにref属性を使用できませんでした。

function MyFunctionComponent() {
 return <input />;
}

class Parent extends React.Component {
 constructor(props) {
 super(props);
 this.textInput = React.createRef();
 }
 render() {
 // This will *not* work!
 return (
  <MyFunctionComponent ref={this.textInput} />
 );
 }
}

＊＊参照が必要な場合は、コンポーネントをクラスに変換します。ライフサイクルの方法や状態が必要な場合と同じです。
しかし、DOM要素またはクラスのコンポーネントを参照すると、このref属性は関数コンポーネントで使用できます。＊

function CustomTextInput(props) {
 // textInput must be declared here so the ref can refer to it
 let textInput = React.createRef();

 function handleClick() {
 textInput.current.focus();
 }

 return (
 <div>
  <input
  type="text"
  ref={textInput} />

  <input
  type="button"
  value="Focus the text input"
  onClick={handleClick}
  />
 </div>
 );
}

DOMを親コンポーネントに参照して公開する
ごく少数の場合、親コンポーネントからサブノードのDOMノードにアクセスすることが望ましいかもしれない。一般的には、コンポーネントパッケージを破壊することがあるので、焦点をトリガするために、またはサブDOMノードのサイズまたは位置を測定するために使用することができる。
参照をサブアセンブリに追加することができるが、これはDOMノードではなく、コンポーネントのインスタンスを得ることができるので、理想的な解決策ではない。また、機能コンポーネントには適用されません。
React 16.3またはより高いバージョンを使用するなら、これらの場合にref forwardingを使用することを提案します。参照転送は、コンポーネントが任意のサブコンポーネントの参照を自分のコンポーネントとして開示することを選択することを可能にする。サブDOMノードを親コンポーネントに開示する方法に関する詳細な例は、ref転送ドキュメントにおいて見出され得る。
React 16.2以下のバージョンを使用する場合、またはref転送よりも多くの柔軟性が必要である場合、この代替方法を使用して、明確に異なる名前のpropとしてrefを送ることができます。
もし可能であれば、DOMノードを露出しないでください。この方法はサブアセンブリにコードを追加する必要があります。サブアセンブリを完全に制御できない場合、最後のオプションはfinddoMNodeを使用しますが、StrictModeを使用することは推奨されません。
本論文で述べたように、皆さんのreactプログラムの設計に役に立ちます。