ライフサイクルを使って状態を更新する
ユーザー操作を起点としたイベント以外にも、状態管理を行うのに適したタイミングがあります。それが、コンポーネントのライフサイクルです。ライフサイクルとは、コンポーネントが生まれてから死ぬまでの間に起こるさまざまな出来事を、メソッド呼び出しとして通知してもらえる仕組みのことです。例えば、次のものがあります。
-
コンポーネントのインスタンスが生まれる:
constructor -
コンポーネントがビューツリーに登録された:
componentDidMount -
コンポーネントが更新された:
componentDidUpdate -
コンポーネントがビューツリーから外される:
componentWillUnmount
ライフサイクルの全体については、公式ドキュメントの次のページで詳しく解説されています。
本節では、ライフサイクルを使って状態管理をしてみましょう。題材としては、1秒ごとに時刻表示を更新する、時計を作ります。
ソースコードはリスト10のとおりです。
// 省略
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date() // (2)
};
}
componentDidMount() {
this.timerID = setInterval(() => { // (4)
this.tick();
}, 1000); // 1秒おきに更新
}
componentWillUnmount() {
clearInterval(this.timerID); // (5)
}
tick() { // (3)
this.setState({ date: new Date() });
}
render() {
return (
<View style={styles.container}>
<Text>現在時刻</Text>
<Text>{this.state.date.toLocaleTimeString()}</Text>{/* (1) */}
</View>
);
}
}
// 省略
このアプリは、次の方針で作りました。
-
setIntervalで1秒おきに画面を更新する - 画面を更新する際、その時点での最新時刻を表示する
-
コンポーネントが画面に表示されたら
setIntervalを始める -
コンポーネントが画面から消えたら
clearIntervalして更新を止める
setIntervalの利用で難しいのは「いつ止めるのか」というところですが、今回はライフサイクルをうまく使って、止めるタイミングを作ることにします。
（1）のようにrender内で現在時刻を表示したいので、コンストラクタの（2）でstateにdateを持たせることにしました。初期値を入れてあるので、このコンポーネントがマウントされている間は、必ずthis.state.dateが存在していることになります。
まずは、画面を更新する都度呼ばれる関数として、（3）のtickメソッドを作りました。呼び出されるたびに最新時刻をstateに登録しなおします。
コンポーネントが画面に一度表示されたタイミングでcomponentDidMountが呼ばれるので、tickメソッドを1秒ごとに呼び出し続ける関数を（4）でsetIntervalにセットしました。後で止めるときに必要になるtimerIDは、ひとまずクラスのプロパティとして登録しています。render内で使わないデータであれば、必ずしもstateに登録する必要はないのです。
最後に、コンポーネントが画面から外れる前のタイミングでcomponentWillUnmountが呼ばれるので、（5）でclearIntervalを実行し、stateの継続的な更新を止めます。
ライフサイクルに合わせて制御を行うことで、画面の初期化や処理の後始末を上手に行うことができます。慣れてきたら活用してみるとよいでしょう。
まとめ
Reactそのものの基本について学んできました。ここで学んだ内容はブラウザ向けのReactアプリを開発する際にも有効です。次回は関数コンポーネントでもstateなどのリッチな機能を利用できる、フックについて解説します。
