React

UIをコンポーネント(小さく独立した部品)から組み立てる

• ReactでReact要素を作成、ReactDOMでReact要素をブラウザ上に描画する

コンポーネント名は常に大文字で始める

コンポーネントはstateに状態を持つ

• コンポーネントには関数コンポーネントとクラスコンポーネントがある
• stateを直接変更しない
  • 代入していいのはコンストラクタ内だけ
  • setState()を使う
    • 逆にコンストラクタ内ではsetState()を使ってはいけない
• 関数コンポーネントは状態を持たない
  • フックを使えば関数コンポーネントにstateやライフサイクルを取り入れられる
  • バージョン15以降の書き方はこちらを推奨
  • UIコンポーネントを純粋関数として表現する

    • // Not pure function
      function Header(text) {
      	let h1 = document.createElement("h1");
      	h1.innnerText = text;
      	document.body.appendChild(h1); // 副作用
      }
      
      // Pure function
      const Header = props => <h1>{props.title}</h1>;
      

コンポーネントはpropsを受け取り、render()を通じて表示するビューの階層構造を返す

• render()内にはJSXという構文を使う
  • <div />はビルド時にReact.createElement('div')に変換される
    • Babelがこの役割を担う
    • できたオブジェクトをReact要素と呼ぶ

ユーザー定義のコンポーネント

• JSXに書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡す
• このオブジェクトをpropsと呼ぶ
  • 自身のpropsは変更してはいけない
  • コンポーネントの階層が深くなり、ひたすらpropsを渡し続けるケースが生まれる
    • Prop-drillingと呼ばれるアンチパターン
    • React Context APIかReduxを使う
  • Container/Presentational Pattern
    • Containerコンポーネントで状態やロジックを管理して、Presentationalコンポーネントは表示のみにするパターン
      • Presentationalコンポーネントは純粋関数
    • 大抵はフックで十分

フック

• 関数コンポーネントの中で状態やライフサイクルを扱う
• useState, useReducer 状態
• useCallback, useMemo メモ化
  • 再描画を減らす
  • useCallbackは関数、useMemoは値のメモ化
  • 依存配列
    • 変化すると関数を実行してメモ化を更新
• useEffect, useLayoutEffect 副作用
  • DOM構築後に実行される
  • useEffectは描画後、useLayoutEffectは描画前
  • 依存配列
    • 変化する度に関数を実行
  • クリーンアップ関数

高階コンポーネント

イミュータビリティ

• データの値を直接書き換えず、望む変更を加えた新しいデータで古いデータを置き換える
  • 変更の検出が容易で、履歴を追いやすい
• React要素はイミュータブルで、UIを更新するには新しい要素を作ってReactDOM.render()に渡す
  • ReactDOMが以前の要素と比較して変更するべきものだけを更新する

DOMの階層構造から離れたい場合はPortalを使う

Routing

• Reactには標準のルーティング機能がない
  • React Routerなどのライブラリを使う

TDD

• Jest
• React Testing Library
  技術