Reactアプリを作ったが基礎的な用語でも理解できていないところがあったので、調べてみた。
React関連
コンポーネント
- UIを構成する部品
- 最小単位はHTMLタグ一つ分
- クラスコンポーネントと関数コンポーネントの２種類がある。
- React 16.7以降はhook機能の追加によって、シンプルに記述できる関数コンポーネントで記述するのが一般的
- Unityで例えるとGameObjectに近い ※同語のComponentではない
state
- コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み。
- 静的(static)変数の代わりに使う。※ちなみに他言語と違ってstaticは予約語ではない。
- スコープ（アクセス範囲）はプライベートと同様の扱いとなる。
- 読み込みは変数と同様の扱いできるが、書き込み時はsetState(),useState()等React特有の記述が必要。
- stateを更新すると、参照しているコンポーネントは自動で再読み込みされる。
- 子コンポーネントにpropsで渡すことはできるが、親コンポーネントにstateを渡すことはできない。
状態管理ライブラリ別のstateのアクセス可能範囲（スコープ）
- Redux
全コンポーネントからアクセス可能で、Store(stateの集まり)はプロジェクトに一つだけしか作成できない。
グローバル変数の様に扱える。
便利だが、記述量が多いので実装が大変。 - Recoil
指定したコンポーネントのみアクセス可能で、atom(stateの集まり)は複数個作成できる。
Reduxより実装は楽。 - どちらも使用しない場合
自コンポーネント内または、親コンポーネントからprops(引数)としてstateを受け取るバケツリレー方式でコンポーネントを跨いでstateを渡す。
孫コンポーネントとか複数階層が出てくると対応できなくなる（対応すると煩雑なコードになる）場合がある。
小規模なアプリだったらこれでも良いかも。
props
- 親コンポーネントから子コンポーネントへ値を渡す仕組み
- 要するにコンポーネント呼び出し時に渡す引数
hook
- 2020年のReact 16.8から使えるようになった。
- 関数コンポーネント内でクラスコンポーネントでしか使用できなかった機能を使用できるようにする関数の種類。
- 上記stateの項目のuseState()もhookの一種
- 本機能の追加により、これまでクラスコンポーネントでしか扱えなかったライフサイクルの機能が関数コンポーネントでも扱えるようになった。
ライフサイクル
- コンポーネント毎の各種タイミングによって実行される関数
種類
tick()
毎秒実行
componentDidMount()
DOM として描画されるタイミングで実行
componentWillUnmount()
DOMが削除されるタイミングで実行Unityで例えるとstart,update等の"スクリプトライフサイクル"に近い
React Router
- ユーザーからの入力に応じて表示させるページを出し分ける機能
- ユーザーがリクエストしたURLとコンポーネントを紐づける（ルーティングする）ことができる。
- ページ間の移動時は、不足しているコンポーネントのみ更新する。（SPAの動作になる）
- ルーティングはサーバー側ではなく、クライアント側で行い、ルート先のコンポーネントをサーバーに要求する動作を行う。
TypeScript関連（基本的に言語固有のもの）
any型
- 動的型付け言語の変数型と同様に扱える型
- 戻り値等の型が読めない場合に使える。
- JavaScriptからの移植が面倒な時に…
スプレッド演算子(...)
- オブジェクトのメンバーを展開して設定することができる。
- プロパティ名と値を全部書きたい時にめちゃくちゃ便利
- 多分ほかの言語にはない
アロー関数
- 他言語のラムダ式、無名関数と同じ
interface
- 多言語同様にインターフェース（実装）に使用する。
- 拡張する(可能性のあるもの含めて)型定義はTypeではなくInterfaceを使う。
- 加えてオブジェクトの構造を宣言するための多くの機能がある。
- 同名のinterfaceを記述すると"Declaration merging"(エラーにならずに統合)が発生するので注意。