せっかくなのでReactにもう少し深入りした

概要

せっかくReactに入門したので、ハンズオンではふわっとしか触れられなかった内容についてもう少し深入りしてみることにした。

私のレベル間

  • JSはなんとなく動かしたいようには書ける。
  • Vue.jsをちょこっと書いたことがある。
  • こういう風に書けばReactのプロジェクトが作れるとなんとなくわかる。

解決したい内容

  1. Reactってそもそも何が嬉しいの
  2. ReactComponentってなんなの
  3. ReactComponentを継承したクラスで実装するconstractor()って何がしたいの
  4. Componentで作成する単位
  5. Stateってなんなの
  6. setState()ってなんなの
  7. setState()してstateに反映されるタイミング
  8. Propsってなんなの
  9. render()ってなんなの

Reactってそもそも何が嬉しいの

  • コンポーネントを組み合わせることで保守性の高いビューが作れる。(やろうと思えばビューだけじゃなくてアプリケーションも作れる。)

React.Componentってなんなの

  • 抽象クラスで、継承した実装クラスでメソッドが使えるようになる。(ライフサイクルメソッド)
  • コンポーネントが更新されると、子コンポーネント全てに更新が走る。(設定することでキャンセルすることは可能)

ライフサイクルのフェーズ

各フェーズ内でReact.Component抽象クラスのメソッドが呼ばれる。

ライフサイクルメソッドの例

  • constructor()
  • render() 等

React.Componentを継承したクラスで実装するconstractor()って何がしたいの

  • DOM挿入前の初期化時に呼ばれる。
  • React.Componentで必須ではないが、Propsを扱うには必須。(初期化する必要があるため)

Componentで作成する単位

  • やっぱりJavaのクラスと同じ感じで設計した方がよさげっぽい。
  • コンポーネントは小さい方が良さげっぽい。

Stateってなんなの

  • コンポーネント内で保持され、外部のコンポーネントからは保持されない。
  • 可変の変数を保持するオブジェクト。
  • Stateは直接書き換えてはいけない。(直接書き換えても反映されない)(setStateが呼ばれることでrerenderされるため)
  • PropsとStateの中身を比較して、値に変更が有る場合は更新する、といったこともできる。
  • ユーザのアクションによって変化する値を管理する時によく使われる。
  • Ajaxのコールバック関数内でresponseをsetStateする時に使う。

setState()ってなんなの

  • Stateオブジェクトを書き換える時に使用するメソッド。
  • 非同期処理する。

setState()してstateに反映されるタイミング

調べてもわからなかった。ハンズオンで聞いた時は、「setState()呼び出し元のメソッドが終わったら反映される」とのことだったが検証してみないと。。

Propsってなんなの

render()ってなんなの

  • React.Componentクラスで必須。
  • 単一のReact要素(コンポーネント)を返す。
  • 描画が不要の場合はnullやfalseを返却することも可。

メモ

  • JSXはJSファイルでエラーが出るので、書いたあと変換する必要がある。

今後調べたいこと

参考

以上。