React の Quick start の簡単なまとめ

はじめに

  • installなど、そのまま簡単に進められたものは省く
  • React公式ドキュメントを読み進める中で、覚えておきたいもののメモ。
  • github-pagesで動いていてて、コードはgithubにあるが、メモ程度に考えてもらった方が、、、

Rendering Elements

  • Reactで作られた作られたアプリケーションは、通常1つのrootDOMnodeからなる。
    • <div id="root"></div>しかないってこと。
    • 既存のアプリケーションに取り入れるなら、複数の独立したrootDOMを取り入れることになるみたい。
  • React Element(componentをクラスとするなら、elementはインスタンスみたいなもの?)はimmutableだ。
    • UIを変更するには、ReactDOM.render()に新たなelementを渡すしかない。
    • Reactは新旧のelementを比較して、変更部分だけを適用する
      • 仮想DOMといわれる仕組みで、部分的な再描画を行うのでコストが小さい

Components and Props

  • Reactのcomponentには2種類ある
    • functional componentsは、propsの受け取りはできるが、stateの変更は行えない。
    • class componentsは、propsの受け取りもstateの変更も行うことができる。
  • 描画の流れ(公式からそのままコードを持ってきている)
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
  1. <Welcome name="Sara" /> element を持った、ReactDOM.render() が呼び出される。
  2. React が {name: 'Sara'} を props として持った Welcom component を呼び出す。
  3. Welcom component が結果として、<h1>Hello, Sara</h1> elementを結果として呼び出す。

  4. ReactDOM は効率的に受け取ったelementに合った形でDOMを更新する

  5. componentのpropsの命名は、呼び出されるcontextではなくcomponent単体から考えるべき

    • 再利用性も高まりやすい
  6. props は Read-Only なので、値の変更はできない。

State and Lifecycle

  • componentDidMount()
  • componentWillUnmount()
    • componentがDOMから消える前に呼び出される
  • stateの注意点
    • 直接stateに値を入れていいのはconstructorの中でだけ。
      変更はsetState()で行う
    • stateの更新は非同期に行われうるので、次の変更にその変更を依存してはダメ
      別変数に入れておくとかしましょう
    • stateの更新はマージされる

Conditional Rendering

  • 条件によって表示内容を変えたいときには、JSXの埋め込み表現内で
    • &&オペレーターを使う
    • 三項対立を使う
  • 特定条件でcomponentを表示したくない時には、propsの値によってnullを返す

Lists and Keys

  • component内でlistをレンダリングする場合には下の例のようにmap()を用いる
  • 下の例ではkeyというものを定義しているが、これはReactが要素の変更、追加、削除を特定するために使われる。
    • keyは、componentに渡されない。
const array = [1, 2, 3];
array.map( x => <li key={x.toString()}>x</li> );

Forms

  • formの入力値の制御・送信は、componentのstateで行う。
    • Controlled Componentと呼ばれる
    • onChange、onSubmitを使う
    • 複数のinput要素を扱う時には、それぞれのnameによって変更するstateを決める(handleChaneは共通でよい)

Lifiting State Up

  • 複数のcomponentの値を同期させたい時
    • 上位のcomponentのstateを使い、そのstateをhandleする関数を下位componentに渡す

Thinking in React

  • stateはinteractiveな値
  • stateアンチパターン
    • 親要素から渡されたpropsをstateにすること
    • 変化しない値をstateが変化しないこと
    • 別のstateやpropsから導き出されうる値である場合

次にやりたいこと

  • turorialをやる
  • apiサーバーと連携したアプリを作る
  • typescriptを導入する