状態

コンポーネントを制御するデータには、props と state の 2 種類があります。props は親によって設定され、コンポーネントのライフタイム全体で固定されます。変化するデータの場合は、state を使用する必要があります。

一般に、コンストラクタで state を初期化し、変更したい場合は setState を呼び出します。

たとえば、常に点滅するテキストを作成したいとします。テキスト自体は点滅するコンポーネントが作成されるときに一度設定されるため、テキスト自体は prop です。「テキストが現在オンかオフか」は時間とともに変化するため、state に保持する必要があります。

TypeScript

JavaScript

実運用アプリケーションでは、タイマーで状態を設定することはおそらくないでしょう。サーバーから新しいデータを受け取ったとき、またはユーザー入力があったときに状態を設定する場合があります。また、Redux や MobX などの状態コンテナを使用してデータフローを制御することもできます。その場合は、setState を直接呼び出すのではなく、Redux または MobX を使用して状態を変更します。

setState が呼び出されると、BlinkApp はコンポーネントを再レンダリングします。タイマー内で setState を呼び出すことで、タイマーが作動するたびにコンポーネントが再レンダリングされます。

State は React と同じように機能するため、State の処理に関する詳細については、React.Component API を参照してください。ここでは、ほとんどの例でデフォルトのテキストカラーを使用していることに気付いたかもしれません。テキストカラーをカスタマイズするには、スタイルについて学習する必要があります。