Reactロードマップ

Hooks

カスタムフック
フック名は全てuse~で命名する。

-Common Hooks-

・useMemo
単純に値の保存のみを目的としたフック。useStateと違い更新する関数は持たない。
書き方：const value = useMemo(func, [])
functionで返した値がvalueに入り、React本体のキャッシュに値が保存されるため初回以降のレンダリングではキャッシュから値が取得される。

・useCallback
useMemoの関数バージョンみたいなもの。コールバック関数の値の保存を目的として使う。

・useRef
DOMへの参照に使用。refプロパティにuseRefで作成した参照を渡すことで、DOMを簡単に操作できる。
書き方：const ref = useRef(initialValue)

・useReducer
useStateの代替手段。現在のstateとdispatch関数をセットで返す。
書き方：const [state, dispatch] = useReducer(reducer,'初期値')

・useContext
コンポーネント間のデータをバケツリレー式に送らなくても、直接context(グローバルなデータ)にアクセスできる機能。

-渡す側-
(1)createContext()でコンテキストオブジェクトを作成。
(2)<コンテキストオブジェクト.Provider value={ context値 }>でコンポーネントにcontextを渡せるようにする。

-受け取る側-
(3)contextを使用する側でuseContext()の引数にコンテキストオブジェクトを渡す。

mm
-カスタムフック-
(https://sbfl.net/blog/2020/08/21/use-react-hooks-easy/)

-コモンフック-
(https://qiita.com/seira/items/f063e262b1d57d7e78b4)

スジ彫りのマサ

Context

propsを使ったコンポーネント間のバケツリレー方式のデータ渡しを回避するための機能。
先に記載した、
・createContect()
・Provider
・useContext()
を使用してデータの受け渡しを行う。

スジ彫りのマサ

Refs

コンポーネント内でDOM操作を行いたい場合に使用。

refを使うとき
・テキストの選択、フォームへのフォーカス、メディアの再生管理(制御)
・アニメーションの発火
・サードパーティのDOMコンポーネントを組み込む場合

refの使用
(1)React.createRef()を使用して作成
(2)this.ref.currentで参照可能

スジ彫りのマサ

Render Props

使いまわしたい関数処理があった際に、propsを使ってコンポーネント間で関数を共有できる。
(https://tamiblog.xyz/2020/03/20/post-409/)

スジ彫りのマサ

High Order Components

コンポーネントを別のコンポーネントに変換する関数のこと。

・ロジックの再利用がしやすい。
・props名の重複が起こると使えない。

compositionだったりhooksでも似たようなことができ、あまり使われないらしい。

スジ彫りのマサ

Portal

親コンポーネントのDOMとは別のDOMノードに対して、子のコンポーネントをレンダーできる機能。

引用文
ポータルの典型的なユースケースとは、親要素が overflow: hidden や z-index のスタイルを持っていても、子要素がコンテナを「飛び出して」見える必要があるものです。例えば、ダイアログ、ホバーカード、ツールチップがそれに当たります。

スジ彫りのマサ

Error Boundary

引用
error boundary は自身の子コンポーネントツリーで発生した JavaScript エラーをキャッチし、エラーを記録し、クラッシュしたコンポーネントツリーの代わりにフォールバック用の UI を表示する React コンポーネントです。error boundary は配下のツリー全体のレンダー中、ライフサイクルメソッド内、およびコンストラクタ内で発生したエラーをキャッチします。

  static getDerivedStateFromError(error) {
    // フォールバックUIが表示されるように状態を更新
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // エラーのログ情報を記録
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // フォールバックUIのレンダリング
      return <h1>Something went wrong.</h1>;
    }

コンポーネントに３点セット
(getDerivedStateFromError(error), componentDidCatch(error, errorInfo)は両方orいづれか)
で追加してエラー発生時のフォールバックUIのレンダー、エラーログの記録が可能

スジ彫りのマサ

Fiber Architecture

React Fiber
React Fiberの目標は、アニメーション、レイアウト、ジェスチャーなどの領域への適合性を高めることです。そのヘッドライン機能はインクリメンタルレンダリングです。レンダリング作業を分割し、複数のフレームに分散させる機能です。
他には主に、新たな更新があった際に作業を休止・強制終了・再利用できる機能、更新の種類別に優先順位をつけられる機能、新しい並行プリミティブなどが挙げられます。
また、この作業は現在進行中です。 Fiberは、完成までにかなりのリファクタリングが必要となりそうな、継続中のプロジェクトです。

日本語訳サイト