ReactのRefsを正しく取り扱う

Reactで同一コンポーネント内でDOMの操作を行いたい場合、ref属性を使って参照をするという方法があります。しかしこれを扱う場合には注意が必要なので、備忘録として残しておきます。

Refsを使うべきシチュエーション

そもそも、Refsはあまり多用すべきでないと公式でアナウンスされています。というのもReactでは、親コンポーネントから子プロセスへの一方向データフローを原則としていて、Refsを使ってコンポーネントに作用をすると、その原則が崩れてしまうためです。

Refsを使って良い例は

• テキストの選択、フォームへのフォーカスもしくはメディア（動画、音声）の再生の制御
• アニメーションを発火させる場合
• サードパーティのDOMコンポーネントを組み込む場合

と公式のドキュメントに記載されています。
JQueryのDOM操作的なことをしたい場合に例外的に使うイメージですかね。

Refsの使い方

Refsを扱うには３つ方法があります。

• React.createRefメソッドを用いる（v16.3.0以上で利用可能）
• refコールバック属性を用いる
• ref文字列属性を用いる（非推奨 v17で削除）

３番目は非推奨なので省力します。

React.createRef メソッドを用いる

Reactがv16.3.0以上の場合、この方法で対処するのがベターです。

Example.jsx

import React, { Component } from 'react';

class Example extends Component {
 	constructor(props) {
  		super(props);
  	 	this.hugaRef = React.createRef();
	}
	render() {
		return (	
			<input 
				className="_hoge"
				type="text"
				ref={this.hugaRef}
			/>
		)
	}
	componentDidMount() {
		this.hugaRef.current.focus();
	}
};

export default Example;

refsはthis.hogeRef.currentで取得できます。

refコールバック属性を用いる

現時点でバージョンが16.2.0以下で、当分バージョンアップの予定がないのであれば、コールバック関数でDOMをセットしています。

Example.jsx

import React, { Component } from 'react';

class Example extends Component {
 	constructor(props) {
  		super(props);
  	 	this.hugaRef = null;
  	  	this.setHugaRef = element => {
  	   		this.hugaRef = element;
  	   }
  	}
	render() {
		return (	
			<input 
				className="_hoge"
				type="text"
				ref={this.setHugaRef}
			/>
		)
	}
	componentDidMount() {
		this.hugaRef.focus();
	}
};

export default Example;

出典

Refs and the DOM - React