TIL # 36 (React intro 3)

4.React構成部品のライフサイクル

構成部品のライフサイクルについて説明します.構成部品を作成するときにclassとして作成する場合は、次の方法を使用して、構成部品のライフサイクルに基づいてそれぞれの方法を呼び出すことができます.

tick関数を1秒に1回呼び出し、現在の時間を秒単位で更新します.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementByID('root')
   );
}

setInterval(tick, 1000);

関数を使用して表示する部分を構成部品にする

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

classコンポーネントを作成します.Clockコンポーネントで毎秒更新する機能が必要です.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render()から最初のパラメータに移動すると、reactはクロック素子のコンストラクション関数を呼び出す.

クロックは初期時間が必要です.stateを現在の時間にリセットしました.

次に、クロック素子のrender()メソッドを呼び出します.

DOMにrender()の戻り要素を追加すると、コンポーネントDidMount関数が呼び出されます.

クロックコンポーネントを毎秒呼び出すtickメソッドにtimerを追加します.

毎秒ブラウザがtickメソッドを呼び出すと、this.state.日付が変わりました.

ステータスが変更されると、元のコンポーネントDidUpdate関数が呼び出されますが、上記では定義されていないため、render()は再呼び出し時に変更部分を変更します.

クロック素子が

DOMから削除されると、コンポーネントWillUnmountが呼び出され、timerも停止します.

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')
);