【React】Reactの基礎知識を学習した④（ライフサイクルメソッド）

コンポーネントの状態の変化（ライフサイクル）により発火するメソッドをライフサイクルメソッドという。

Reactのライフサイクルメソッドには以下の７種類がある。

componentWillMount()
コンポーネントがマウント(配置)される直前に呼び出されるメソッド。

componentDidMount()
コンポーネントがマウント(配置)された直後に呼び出されるメソッド。
このメソッド内では描画されたDOMにアクセスすることができる。

componentWillReceiveProps()
コンポーネントが受け取るpropsが変化した場合に呼び出されるメソッド。

shouldComponentUpdate()
stateもしくはporpsが変更された際のコンポーネントの再描画前に呼び出されるメソッド。
このメソッドでtrueを返した場合はコンポーネントは再描画され、falseを返した場合は再描画されない。
パフォーマンスの観点から再描画を抑制したい場合に利用される。

componentWillUpdate()
コンポーネントの再描画前に呼び出されるメソッド。
前述のshouldComponentUpdate()でfalseを返している場合はこのメソッドは呼び出されない。

componentDidUpdate()
コンポーネントが再描画された直後に呼び出されるメソッド。
このメソッド内では再描画されたDOMにアクセスすることができる。

componentWillUnmount()
コンポーネントがアンマウント（DOMから削除）される直前に呼び出されるメソッド。

以下サンプルコード

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

//コンポーネントの作成
class Number extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stateVal : 0
    };
    this.incrementState = this.incrementState.bind(this)
  }
  //Stateの加算
  incrementState(){
      this.setState({
        stateVal : this.state.stateVal+1
      });
  }
  componentWillMount(){
    console.log("コンポーネントのマウント前")
  }
  componentDidMount(){
    console.log("コンポーネントのマウント後")
  }
  componentWillReceiveProps(){
    console.log("コンポーネントが受け取るpropsが変化")
  }
  shouldComponentUpdate(){
    console.log("コンポーネントがアップデートされる前1")
    return true;
  }
  componentWillUpdate(){
    console.log("コンポーネントがアップデートされる前2")
  }
  componentDidUpdate(){
    console.log("コンポーネントがアップデートされた後")
  }
  componentWillUnmount(){
    console.log("コンポーネントがアンマウントされた後")
  }
  render() {
    return (
      <div>
        <p>props:{this.props.propVal}</p>
        <p>state:{this.state.stateVal}</p>
        <input type="button" value="stateの加算" onClick={this.incrementState} />
      </div>
    )
  }
};
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      propVal : 0,
      isComponent :false
    };
    this.incrementProps = this.incrementProps.bind(this);
    this.ｍountComponent = this.ｍountComponent.bind(this);
  }
  //propsの加算
  incrementProps(){
      this.setState({
        propVal : this.state.propVal+1
      });
  }

  ｍountComponent(){
      this.setState({
        isComponent : !this.state.isComponent
      });
  }


  render() {
    return (
      <div>
        <input type="button" value="Numberコンポーネントのマウント切り替え" onClick={this.ｍountComponent} /><br />
        {(() => {
          if (this.state.isComponent) {
            return <Number propVal={this.state.propVal} />;
          }else{
            return null
          }
        })()}
        <input type="button" value="propsの加算" onClick={this.incrementProps} /><br />

      </div>
    )
  }
};
 //コンポーネントの描画
ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

ここまでくればあとは調べながらやればなんとかなりそうなので予習は一旦終了。
また詰まったら参考サイト様のお世話になろう。

↓参考サイト様
Reactのライフサイクル – React入門 - to-R Media

onsen code monkey

個人的な日記とプログラミング備忘録です

【React】Reactの基礎知識を学習した④（ライフサイクルメソッド）