Webアプリ開発 React.js フロントエンド環境 Part(12)

Javascript

はじめに

こんにちは、swim-loverです。 初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。今の目標は、出席簿アプリを作ることです。

第11回では、公式サイトに従い、テスト用サブドメインでClockコンポーネントのクラス化について確認しました。(sample11-15)

クラス化はしたものの、時刻表示は更新されない状態です。

引き続き、Reactの勉強を進めていきたいと思います。

React コンポーネントのマウント、アンマウント

第11回ではクラス化はしたものの、時刻表示は更新されない状態です。

今回この状態をコンポーネントのマウント、アンマウントメソッドを用いて解決します。

公式サイトでは、componentDidMount()は、DOM(Document Object Model)にレンダーされたあとに呼び出される。と説明されています。初心者には、用語が難しいので、”描画の準備ができたら呼び出出される”と理解することにしました。

componentDidMount()で、1秒のインターバルタイマーをセットします。引数は、このクラスのtick()メソッド(後で追加します。)です。

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

componentWillUnmount()は、”描画を終了するときに呼び出される”と理解することにしました。

ここで、インターバルタイマーをクリアします。

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

最後に、tick()関数をtick()メソッドとして、Clockクラスに移設します。

これで時間に関する処理がClockクラス内にすべて収まりました。

const title= document.querySelector('#hello_world_15');

class Clock extends React.Component {
  constructor(props) {
    super(props);
    console.log('call constructor()')
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

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

  tick() {
    this.setState({
      date: new Date()
    });
  }
  
  render() {
    console.log('call render()')
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString('ja-JP',{ timeZone:'Asia/Tokyo'})} at Tokyo.</h2>
      </div>
    );
  }
}

ReactDOM.render(
    <Clock />,
    title
);

1秒ごとに時刻が更新されるようになりました。(実行結果

tick()メソッドでdateを更新していますが、SetState()を使って更新する必要がある点は注意です。

まとめ

Reactに関する久しぶりの更新でした。今回、公式サイトに従い、テスト用ドメインで、Clockコンポーネントのクラス化について確認しました。(sample11-15)

コメント

タイトルとURLをコピーしました