refとは?
refとはReference(参照)のことです。ミュータブルな値を管理するときに使います。
refの使いみちの最たるものはDOMへのアクセスです。たとえばinput要素が持つfocusメソッドを呼びたいときにrefを使います。
const App = () => {
const ref = useRef();
useEffect(() => ref.current.focus(), []);
return <input ref={ref}/>;
};
上記の例では、refはDOMへの参照となっています。もちろん、refを使えばinputのvalueを変更したり、focusする以外にも様々なことを命令的にできます。しかし、DOMを命令的に操作するのはReactのやり方に相反します。そのため、できる限りrefを使わず宣言的に書く方法を考えるべきです。
refは単にミュータブルなオブジェクトです。そのため、生DOMへのアクセス以外にも使うことができます。ただし、そこまで用途はありません。というより、他の手法で十分なことがほとんどです。refを使いたくなったら一旦落ち着いて他の方法を考えましょう。
forwardRef
通常、関数コンポーネントはrefを受け取ることができません。たとえば下のMyInputのようなことはできません。
const MyInput = ({ref}) => (
<input ref={ref}/>
);
const App = () => {
const ref = useRef();
const onClick = () => { ref.current.focus() };
return (
<div>
<MyInput ref={ref}/>
<button onClick={onClick}>focus</button>
</div>
);
}
refは特殊なpropなので、そのままでは受け取れません。forwardRefを使ってやると関数コンポーネントでもrefを受け取れます。
const MyInput = React.forwardRef((prop, ref) => (
<input ref={ref}/>
));
String refを使っていたコンポーネントをhooksで書き直す
useImperativeHandleを使うと、string refを使っていたクラスコンポーネントを関数コンポーネントへ書き直すことができます。
以下のChildコンポーネントはstring refを使って複数のinputへのrefを親コンポーネントへ提供しています。
class Child extends React.Component {
render() {
return (
<form>
<input type="email" ref="email"/>
<input type="password" ref="password"/>
<input type="text" ref="username"/>
</form>
);
}
}
class App extends React.Component {
focusOnEmail() {
this.refs.form.refs.email.focus();
}
render() {
return (
<div>
<Child ref="form"/>
<button onClick={this.focusOnEmail.bind(this)}>focus on email</button>
</div>
)
}
}
Childコンポーネントをhooksを用いて関数コンポーネントへ書き直します。
const Child = React.forwardRef((prop, ref) => {
const emailRef = useRef(),
passwordRef = useRef(),
usernameRef = useRef();
useImperativeHandle(ref, () => {
return {
refs: {
get email() { return emailRef.current; },
get password() { return passwordRef.current; },
get username() { return usernameRef.current; },
}
};
})
return (
<form>
<input type="email" ref={emailRef}/>
<input type="password" ref={passwordRef}/>
<input type="text" ref={usernameRef}/>
</form>
);
});
これで従来のstring refでできたことが再現できます。
(型をつけるのが非常に困難なので、こんな方法するくらいなら、素直にリファクタリングしましょう)
そもそも
ただし、そもそもこれはstring refからhooksへ置き換えられるだけです。古いクラスコンポーネントを書き直すとき以外、こんな方法しなくて十分です。というのも幾つか理由があります。
- Appコンポーネント側からrefs以下に何があるか分からない
- 下のコンポーネントでhookを使いたくない
そのため、個人的にこの方法は好きではありません。
いちから作るのであれば、まずApp側でrefを作り、Childはそれを受け取って紐付けるだけにするとシンプルになります。以下はChildをSFCにしてrefを受け取る例です。
const Child = ({ emailRef, passwordRef, usernameRef }) => (
<form>
<input type="email" ref={emailRef} />
<input type="password" ref={passwordRef} />
<input type="text" ref={usernameRef} />
</form>
);
const App = () => {
const emailRef = useRef(),
passwordRef = useRef(),
usernameRef = useRef();
const focusOnEmail = () => emailRef.current.focus();
return (
<div>
<Child
emailRef={emailRef}
passwordRef={passwordRef}
usernameRef={usernameRef}
/>
<button onClick={focusOnEmail}>focus on email</button>
</div>
);
};
TypeScriptでの型付け的にもこちらのほうが筋が通っています。
もちろん、下のほうの実装を隠蔽したいときはuseImperativeHandleが活躍します。