Reactの基礎を学ぶためのメモ.
Reactコンポーネントを作るためにコンポーネントのライフサイクルについて理解する.
#Reactコンポーネントの作り方 その2
##Reactコンポーネントのライフサイクル
Reactコンポーネントには,Mounting
(準備期間),Updating
(表示期間),Unmounting
(破棄期間)の3つのライフサイクルが存在する.
各ライフサイクルでは,呼び出されるメソッドの流れが決まっている.
###Mounting
UIにコンポーネントが描画されるまでの準備期間.最初の一回のみ実行.
constructor()
render()
componentDidMount()
###Updating
UIにコンポーネントが表示されていて,基本的にユーザが操作できる期間.propsやstateの更新の度に実行.
render()
componentDidUpdate()
###Unmounting
他のコンポーネントに切り替える前に現在のコンポーネントを破棄するための期間.終わりの一回のみ実行.
componentWillUnmount()
##処理の流れを決めるライフサイクルメソッド
各ライフサイクルメソッドについて,詳しく見ていく.
ちなみに,必須のrender()
以外はオプショナルのため,書くことがなければ省略が可能.
###constructor()
stateの初期化やactionのバインドのために用いられる.
###componentDidMount()
1度目のrenderメソッドが呼ばれた後に1度だけ呼ばれるメソッド.
この時点ではまだUIに表示はされておらず,データをフェッチしたり,アニメーションやタイマーをセットする場合はここで行う.
###render()
コンポーネントの根幹となる日数のメソッド.
ここに書いてあるコードが実際にUIに現れるものである.
renderはpropsやstateの更新の度に呼ばれるため,ここで直接propsやstateを操作してはいけない.
また,新しい関数の定義も避けるべき.
propsやstateの値が変わっても,結果は冪等であるべき.
###componentDidUpdate()
第一引数に1つ前のprops,第二引数に1つ前の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>
}
}