はじめに
こんにちは、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)
組み込み系ソフトエンジニアをしています。これまでフロントエンド技術は避けてきましたが、食わず嫌いをやめて、勉強を始めました。
趣味は、水泳、ロードバイク、ランニング、登山です。
組み込み系技術ネタ、勉強したフロントエンド技術、たまに趣味の運動について発信していきます。
どうぞよろしくお願いします。
コメント