Reactのrefについて理解を深める

まとめ

• ref は render() で作成された DOM ノードもしくは React の要素にアクセスするために利用する
  • 基本的にはなるべく使わないようにすべき
• ref がよく使われるケース
  • フォーカス、テキストの選択およびメディアの再生の管理
  • アニメーションの発火
• ref の利用方法
  • createRef or useRefを利用して ref を作成する
    • createRef はクラスコンポーネントのときに利用する
  • ref 属性を用いて、React の DOM 要素に紐付ける
    • DOM 要素 or クラスコンポーネントにのみ紐付け可能
    • 関数コンポーネントでrefを使用することはできるが、紐付けは不可能
  • current プロパティから紐付けた DOM 要素にアクセスする
• ref の挙動
  • コンポーネントがマウントされる -> DOM 要素が割り当てられる
  • マウントが解除される -> null が割り当てられる
• ref はインスタンス変数としても利用可能
  • 副作用内でだけ書き換える = レンダー内で置き換えるのは非推奨
    • refObject.current = someValue のように代入で直接書き換える事ができる
  • ref の変更は通知されない = 再レンダリングが発生しない
    • useState との異なる点はここ
• ref のフォワーディング
  • DOM の ref を親コンポーネントに公開すること
  • 子コンポーネント内の DOM に直接アクセスしたいときに使う

参考資料

DOMとRef
https://ja.reactjs.org/docs/refs-and-the-dom.html

Refのフォワーディング
https://ja.reactjs.org/docs/forwarding-refs.html

useRef
https://reactjs.org/docs/hooks-reference.html#useref

インスタンス変数のようなものはありますか？
https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables