Lifecycle

6991 ワード
React テキストリンク
render、componentDidMount、componentDidUpdate、componentWillUnmountなどの関数は、React.Componentクラスによって提供される.
すなわち、classを使用して構成部品を作成する際に使用される関数です.

例による理解

class Clock extends React.Component {

  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
  • ReactDOM.render()の第1パラメータからクロックが転送されると、RECTはクロック素子のconstructorを実行する.
  • constructor内のsuper()は、extendedのReact.Componentメソッドを使用するために貼り付けなければならない.また、this.state = {}にクロックの初期状態(ここではnew Date)を設定してもよい.

  • 次いで、render()メソッドが呼び出される.
  • render()メソッド内でリターンが実行される場合、componentDidMount()メソッドが呼び出される.

  • タイマーを追加し、component内のtick関数を毎秒実行できます.

  • ブラウザがtickメソッドを呼び出すたびに、this.state.dateの値が変化します.

  • このとき、componentDidUpdate()と宣言すると、ステータス変更時に呼び出されますが、rander()が定義されていないために再呼び出された部分が変更されます.

  • クロック素子がDOMから削除されると、componentWillUnmountが呼び出され、timerも共に停止する.
    • [白俊]#2352半導体設計
    条件文if文(2)