Reactロードマップの用語について ~Fundamental Topics~
スジ彫りのマサReactロードマップ
スジ彫りのマサCreate React App
Facebook公式がサポートしている環境構築ツール。
コマンド一つでReact開発環境の構築を行なってくれる。
(npx create-react-app プロジェクト名)
typescriptの使用
(npx create-react-app プロジェクト名 --template typescript)
簡単に環境構築できる反面、カスタマイズが容易にできないようになっている。
webpack、babel、ESLintなどの設定をカスタマイズする場合、ejectコマンドを使用するとファイルを直接参照できるようになる。
(npm run eject)
スジ彫りのマサJSX
「JavaScript XML」の略。
Reactコンポーネント内でマークアップ言語(HTML,XML..)を記述するためのXML風の構文のこと。
(javascript上でHTML(XML)と同じような記述ができる)
babelなどを通してReact.createElementメソッドに変換される。
※ マークアップ言語
タグで囲む(マークする)ことで文章構造を表現する言語。
スジ彫りのマサComponents
入力フォームや、表などの画面の一要素をコンポーネント(部品)として切り出し、複数の画面で使用できるようにする。
Reactではこのコンポーネントの書き方に
・関数型コンポーネント
・クラスコンポーネント
の２種類の書き方がある。
主な違いとして
・構文の違い
->クラス型はrenderメソッドを必要とする
・propsの受け渡し
->関数型：引数としてpropsを渡す。クラス型：this.propsで参照する必要がある。
・stateの処理
->従来はクラス型でのみ扱えていたが、React16.8からは関数型でもuseStateを使用してstateの処理が可能になった。
・ライフサイクルメソッド
->従来はクラス型でのみ扱えていたが、React16.8からは関数型でもuseEffectを使用してライフサイクルの処理が可能になったそう。
(公式としては関数型での記述を今後推進していきたい模様。)
スジ彫りのマサProps vs State
Props
・読み取り専用、コンポーネント間の一方向のデータの受け渡しに使用。
・読み取り専用であるため、コンポーネント内でpropsの変更はできない
State
・コンポーネント内で動的な値の作成、変更を行いたい場合にstateを使用。
・コンポーネント内でsetStateメソッドを使用して非同期に値(状態)の書き換えが可能。
その他比較
(https://github.com/uberVU/react-guide/blob/master/props-vs-state.md#changing-props-and-state)
スジ彫りのマサConditional Rendering(条件付きレンダー)
条件によってレンダリングする要素を分岐する。
論理演算子(&&)や三項演算子(? :)も扱える。
レンダーさせたくない時はreturnでnullを返せば良い。
(nulllを返してもライフサイクルメソッドの発火には影響せず、変わらず呼び出される。)
スジ彫りのマサComponent Life Cycle
コンポーネントの状態(Life Cycle)に合わせて処理を実行できる。
よく使用されるのは太字で表示されてるやつ。
・constructor
->マウントされる前に呼び出される。
(stateの初期化、イベントハンドラをインスタンスにバインドする際に使用)
・render
->propsとstateを元に、ドキュメントをレンダリングする。
レンダリングについてはこちらの記事を参考
(https://qiita.com/hellokenta/items/6b795501a0a8921bb6b5)
・componentDidMount
->コンポーネントがマウントされた直後に呼び出される。
(DOMノードを必要とする初期化はここで行う。)
・componentDidUpdate
->コンポーネントの更新時に呼び出される。
・componentWillUnmount
->コンポーネントが破棄される直前に呼び出される。
(クリーンアップ処理)
スジ彫りのマサLists and Keys
要素のリストにkeyを与えないとエラーが出る。
Warning: Each child in a list should have a unique “key” prop
リストには一意に特定できるようにユニークなkeyを与える必要がある。
(識別性を与えることで、効率的なコンポーネントの描画に役立つため..？)
スジ彫りのマサComposition vs Inheritance (コンポジション vs 継承)
Reactでは継承を使うよりコンポジションを使うことを勧めている。
コンポジション
・Reactコンポーネントの構成のこと
（どのような分割単位でコンポーネントを組み立てるか）
・事前にコンポーネントを構成する子要素が決まっていない場合、childrenという特別なpropsを使って他のコンポーネントから任意の子要素を渡すことができる。
(https://programming-world.net/react/react_composition/)
継承がなぜダメか （要勉強...）
・継承を使うとコンポーネントを再利用する際にprops以外にも制約がかかってしまい柔軟性が低下するため？
mm
(https://zenn.dev/dove/scraps/9a8b097211ea15)
スジ彫りのマサBasic Hooks (UseState, UseEffect)
Rect16.8から使えるようになった機能
useState()
・関数コンポーネントでstateを管理するためのフック。
->引数にはstateの初期値を渡す。(クラスと異なってオブジェクトである必要はない)
返り値は現在のstate, それを更新するための関数がペアで返される。
( const [state, 関数] = useState() )
useEffect()
・関数の実行をReactコンポーネントのレンダリング後まで遅らせるフック。
->クラスコンポーネントのライフサイクルメソッドに相当。
useEffect()内でクリーンアップ関数をreturnすることで、
マウント時に実行した処理をアンマウント時に解除することができる。