メインコンテンツまでスキップ

避難ハッチ

このページでは、React で DOM を扱う際に便利な仕組みについて学びましょう。

避難ハッチがなぜ必要なのか？​

React とは？で触れたように、本サイトでは React の DOM 実装を扱っていますが、ここまで触れてきた React の機能だけでは、ブラウザーがサポートする HTML 要素や、イベントを扱うことが難しい場面があるのです。React は、そういった「React の外のシステム」を扱うために便利な機能を提供しています。

もちろん、ここで扱う仕組みを使わずに、これまで学んだ仕組みで実現できるなら、それを優先すべきです！

それでは、避難ハッチの内容を進めていきましょう。

理解度チェック​

学んだことを思い出しながら、折りたたみを展開して書かれているキーポイントが自分の理解と合っているか確認しましょう。

値を記憶したいけどレンダーをトリガーさせない方法

ref を使えば、レンダーをトリガーさせずに値を書き換え（ミューテーション）ることができます。

ref で値を参照するで学びましょう。

React から DOM を操作する方法

次の方法で DOM を操作できます:

  1. ref をコンポーネント内で宣言する
  2. DOM を参照したい HTML 要素の ref 属性に 1. を渡す
    1. が null ではないことを確認する

ref で DOM を操作するで学びましょう。

React の外のシステムをレンダーに使用する方法

エフェクト (Effect) を使用します。

エフェクトを使って同期を行うで学びましょう。

エフェクトが要らないケース

次のケースではエフェクトは不要です。

  • レンダーに使用する値を JavaScript 式で変換したいケース。const 値に代入すれば実現できます。
  • ユーザーの入力に起因するイベント処理には、イベントハンドラーを使用します。

そのエフェクトは不要かもで学びましょう。

エフェクトのライフサイクル

エフェクトはレンダーとコミットとは異なるプロセスで更新されます:

  1. 同期の開始
    • 依存配列の監視
  2. 同期の終了

リアクティブなエフェクトのライフサイクルで学びましょう。

エフェクトからイベントを分離する方法

エフェクトで同期する対象を特定の変数ではなく、イベントにしたいときは、useEffectEvent を使用します。

エフェクトからイベントを分離するで学びましょう。

エフェクトから依存する値を減らす方法

次のようにして依存する値を減らせます:

  • 参照する値を state や ref ではなく const 定数にする
  • そのエフェクトは不要かもと疑う
  • エフェクトからイベントを分離する
  • props や state に依存しないオブジェクトと関数はコンポーネントの外に移動する
  • props や state に依存するオブジェクトと関数はエフェクトのコードの中に移動する
  • オブジェクトや関数ではなく文字列や数値などのプリミティブ（原始的）な値に依存するようにする

エフェクトから依存値を取り除くで学びましょう。

React の外のシステムとの処理を再利用可能にする方法

カスタムフックにすることで再利用可能にできます。

カスタムフックでロジックを再利用するで学びましょう。