最終更新:2022-09-22 (木) 16:55:34 (579d)
React/コンセプト
1. Hello World
https://ja.reactjs.org/docs/hello-world.html
- このガイドの読み方
- 前提となる知識
2. JSX の導入
- JSXを使う理由
- JSXに式を埋め込む
- JSXもまた式である
- JSXで属性を指定する
- JSXで子要素を指定する
- JSXはインジェクション攻撃を防ぐ
- JSXはオブジェクトの表現である
3. 要素のレンダー
- 要素を DOM として描画する
- const root = ReactDOM.createRoot
- root.render?(element);
- レンダーされた要素の更新
- React要素はイミュータブル
- 一度要素を作成すると、その子要素もしくは属性を変更することはできません
- React は必要な箇所のみを更新する
- React DOM は要素とその子要素を以前のものと比較し、DOM を望ましい状態へと変えるのに必要なだけの DOM の更新を行います。
- 話題
4. コンポーネントと props
- React/コンポーネント
- （“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返す
- 関数コンポーネントとクラスコンポーネント
- React/props
React/関数コンポーネント コンストラクタの引数 (props) React/クラスコンポーネント this.props
- コンポーネントのレンダー
- コンポーネントを組み合わせる
- コンポーネントの抽出
- コンポーネントの分割
- Props は読み取り専用
- 自分自身の props は決して変更してはいけません。
- 全てのReactコンポーネントは、自己のpropsに対して純関数のように振る舞わねばなりません。
5. state とライフサイクル
- 関数をクラスに変換する
- クラスにローカルな state を追加する
- クラスにライフサイクルメソッドを追加する
- state を正しく使用する
- state を直接変更しないこと
- state の更新は非同期に行われる可能性がある
- state の更新はマージされる
