React.js componentのライブサイクル図


React.jsのcomponentを理解するために、ライフサイクルを図にしてみました。

🤔 各メソッドの意味

ComponentWillMount

  • マウントされる直前に1回だけ呼ばれるので初期化処理に使う
  • setState()するとrender時にまとめて実行される

componentDidMount

  • マウントされた直後に1回だけ呼ばれるのでDOMに関わる初期化処理に使う
  • メソッド内で描画されたDOMにアクセスできます

componentWillReceiveProps

  • コンポーネントがプロパティ値を受け取る(更新した)時に呼ばれる
  • 親コンポーネントのSateがPropsとして渡されていてその変化で表示以外のことがしたい場合に使う

shouldComponentUpdate

  • コンポーネントを更新してもいいかの判断に使う
  • 戻り値がFalseの場合は更新が行われないのでパフォーマンスで描画を抑制したいときに使う

componentDidUpdate

  • コンポーネントが更新された後に呼ばれる
  • メソッド内で再描画されたDOMにアクセスできます

componentWillUnmount

  • コンポーネントがアンマウントされる前に呼ばれる
  • 定期的に実行される処理やDOMのイベントを解除するために使う

🍮 ライフサイクル時のメソッド

//コンポーネントの作成
class Number extends React.Component {
constructor(props) {
super(props);
}
componentWillMount(){
console.log("コンポーネントのマウント前に呼ばれます")
}
componentDidMount(){
console.log("コンポーネントのマウント直後に呼ばれます")
}
componentWillReceiveProps(nextProps){
console.log("コンポーネントが新しいpropsを受け取ったときに呼ばれます")
}
shouldComponentUpdate(nextProps, nextState){
console.log("コンポーネントがアップデートされる前1によばれます")
return true;
}
componentWillUpdate(nextProps, nextState){
console.log("コンポーネントがアップデートされる前2に呼ばれます")
}
componentDidUpdate(){
console.log("コンポーネントがアップデートされた後に呼ばれます")
}
componentWillUnmount(){
console.log("コンポーネントがアンマウントされる直前に呼ばれます")
}
render() {
return (
<div>コンポーネント</div>
)
}
};

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)