Reactを使ってWebサービスを作るための基礎３

Reactの基礎を学ぶためのメモ．
Reactコンポーネントを作るためにコンポーネントのライフサイクルについて理解する．

Reactコンポーネントの作り方　その２

Reactコンポーネントのライフサイクル

Reactコンポーネントには，Mounting(準備期間)，Updating(表示期間），Unmounting(破棄期間)の３つのライフサイクルが存在する．

各ライフサイクルでは，呼び出されるメソッドの流れが決まっている．

Mounting

UIにコンポーネントが描画されるまでの準備期間．最初の一回のみ実行．

1. constructor()
2. render()
3. componentDidMount()

Updating

UIにコンポーネントが表示されていて，基本的にユーザが操作できる期間．propsやstateの更新の度に実行．

1. render()
2. componentDidUpdate()

Unmounting

他のコンポーネントに切り替える前に現在のコンポーネントを破棄するための期間．終わりの一回のみ実行．

1. componentWillUnmount()

処理の流れを決めるライフサイクルメソッド

各ライフサイクルメソッドについて，詳しく見ていく．
ちなみに，必須のrender（）以外はオプショナルのため，書くことがなければ省略が可能．

constructor()

stateの初期化やactionのバインドのために用いられる．

componentDidMount()

1度目のrenderメソッドが呼ばれた後に1度だけ呼ばれるメソッド．
この時点ではまだUIに表示はされておらず，データをフェッチしたり，アニメーションやタイマーをセットする場合はここで行う．

render()

コンポーネントの根幹となる日数のメソッド．
ここに書いてあるコードが実際にUIに現れるものである．
renderはpropsやstateの更新の度に呼ばれるため，ここで直接propsやstateを操作してはいけない．
また，新しい関数の定義も避けるべき．
propsやstateの値が変わっても，結果は冪等であるべき．

componentDidUpdate()

第一引数に１つ前のprops，第二引数に１つ前のstateが渡される．
パフォーマンスを低下させるpropsやstateの更新は避けるべき．

componentWillUnmount()

現在のコンポーネントを破棄する直前に呼ばれるメソッド．
もうrenderは呼ばれることはないので，ここでpropsやstateの更新をしても意味がない．

Stateless Functional Componentについて

Reactライブラリをimportするだけで自動的にReactコンポーネントとして扱われる．
このとき，renderメソッドのみのコンポーネントとなる．

コンポーネントがstateを保持しない場合には，Stateless Functional Componentにすることで負荷を減らすことができる．

import react from 'react'

const NumberPlate = (props) => {
  return <span style={{ color: '#eeeeee' }}>{props.children}</span>
}

これは下記に示すコードと処理自体は同じ．

export default class NumberPlate extends React.Component {
  render (props)  {
    return <span style={{ color: '#eeeeee' }}>{props.children}</span>
  }
}