React
UIをコンポーネント(小さく独立した部品)から組み立てる
ReactでReact要素を作成、ReactDOMでReact要素をブラウザ上に描画する
コンポーネント名は常に大文字で始める
コンポーネントはstateに状態を持つ
コンポーネントには関数コンポーネントとクラスコンポーネントがある
stateを直接変更しない
代入していいのはコンストラクタ内だけ
setState()を使う
逆にコンストラクタ内ではsetState()を使ってはいけない
関数コンポーネントは状態を持たない
フックを使えば関数コンポーネントにstateやライフサイクルを取り入れられる
バージョン15以降の書き方はこちらを推奨
code:js
// 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コンポーネントは表示のみにするパターン
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