はじめに
こんにちは、swim-loverです。 初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。今の目標は、出席簿アプリを作ることです。
第10回では、公式サイトに従い、テスト用サブドメインでReact レンダリングの更新処理からClockコンポーネントのカプセル化について確認しました。(sample6-10, sample11-15)
引き続き、Reactの勉強を進めていきたいと思います。
React カプセル化 Step2
第10回は、React カプセル化Step1まで確認しました。
Step1のコードは、1. render()関数内で、時刻取得関数Date()を呼び出している。2. 1秒周期タイマーの呼び出し位置が独立している。の2点でコードの改良の余地があります。
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
title
);
}
setInterval(tick, 1000);
React Clock関数をクラス化する
React.Component
を継承するClockクラスを作成します。
Clock関数の中コードをClockクラスのRenderメソッドに移動します。
propsをthis.propsに書き換えていることに注意します。
class Clock extends React.Component {
render() {
return (
<div>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
<h2>It is {this.props.date.toLocaleTimeString('en-US',{ timeZone:'America/New_York'})} at NewYork.</h2>
<h2>It is {this.props.date.toLocaleTimeString('ja-JP',{ timeZone:'Asia/Tokyo'})} at Tokyo.</h2>
<h2>It is {this.props.date.toLocaleTimeString('en-US',{ timeZone:'UTC'})} UTC time .</h2>
</div>
);
}
}
Clock関数からClockクラス化は問題なく動作します。見た目に変化はありません。
Clockクラスの改良を更に進めていきます。
React propsからstateへ
this.propsをthis.stateに書き換えます。
また、Clockクラスコンストラクターで、時刻取得関数Dateを呼びます。
const title= document.querySelector('#hello_world_14');
class Clock extends React.Component {
constructor(props) {
super(props);
console.log('call constructor()')
this.state = {date: new Date()};
}
render() {
console.log('call render()')
return (
<div>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
<h2>It is {this.state.date.toLocaleTimeString('en-US',{ timeZone:'America/New_York'})} at NewYork.</h2>
<h2>It is {this.state.date.toLocaleTimeString('ja-JP',{ timeZone:'Asia/Tokyo'})} at Tokyo.</h2>
<h2>It is {this.state.date.toLocaleTimeString('en-US',{ timeZone:'UTC'})} UTC time .</h2>
</div>
);
}
}
function tick() {
console.log('call tick()')
ReactDOM.render(
<Clock />,
title
);
}
setInterval(tick, 1000);
実行結果は、一秒周期でtick関数を呼び出しているにもかかわらず、時刻表示は更新されません。
この原因をコードの3箇所にLogを埋め込んで調べてみました。
console.log(‘call constructor()’), console.log(‘call render()’), console.log(‘call tick()’)をコード中に埋め込んでいます。
開発者モードでログを確認したところ、1秒周期でtick()とrender()で繰り返し呼ばれていますが、時刻を取得しているconstrunctor()が一回しか呼ばれていません。
Clockクラスは、tick()で毎回生成され、破棄されるのではなく、初回呼び出しで生成され、そのあとは、破棄されないで使用される動作であることがわかります。
まとめ
今回、公式サイトに従い、テスト用ドメインで、Clockコンポーネントのクラス化について確認しました。(sample11-15)
組み込み系ソフトエンジニアをしています。これまでフロントエンド技術は避けてきましたが、食わず嫌いをやめて、勉強を始めました。
趣味は、水泳、ロードバイク、ランニング、登山です。
組み込み系技術ネタ、勉強したフロントエンド技術、たまに趣味の運動について発信していきます。
どうぞよろしくお願いします。
コメント