LoginSignup
95

More than 5 years have passed since last update.

React.jsのメソッドが呼ばれる順番

Last updated at Posted at 2015-12-22
var Temp = React.createClass({

  getDefaultProps: function() {
    // コンポーネント1つにつき一度だけ呼ばれる
    console.log("getDefaultProps");
  },

  getInitialState: function() {
    // インスタンス作成のたびに呼ばれる
    console.log("getInitialState");
    return {temp: "EMPTY"};
  },

  componentWillMount: function() {
    // 描画が行われる直前に呼ばれる
    console.log("componentWillMount");
  },

  render: function() {
    // このメソッドにより仮想DOMが作成される
    console.log("render");
    return(
      <p className="temp">{this.props.temp}</p>
      );
  },

  componentDidMount: function() {
    // 描画が成功して、DOMにアクセス可能になる
    console.log("componentDidMount");
  },

  componentWillReceiveProps: function() {
    // プロパティ(props)が変更された時
    console.log("componentWillReceiveProps");
  },

  shouldComponentUpdate: function() {
    // propsが変更されてもコンポーネントに変更がない時はここでfalseを返すことで、あとの処理を飛ばすことができる
    console.log("shouldComponentUpdate");
    return true;
  },

  componentWillUpdate: function() {
    // 描画が行われる直前に呼ばれる
    console.log("componentWillUpdate");
  },

  componentDidUpdate: function() {
    // 描画が成功して、DOMにアクセス可能になる
    console.log("componentDidUpdate");
  },

  componentDidUnmount: function() {
    // コンポーネントが破棄される時に呼び出される
    console.log("componentDidUnmount");
  }

});

React.render(
  <Temp temp="メソッドの練習" />,
  document.getElementById('content')
  );

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
95