今までは固定の文字をブラウザへ表示しました。
今回はブラウザへ動的に文字を表示させます。
説明
Reactにおけるステート処理の概要
Reactにはステートと言うデータを保持、更新する機能が存在します。ステートはデータを保持し、それを更新する事で、ブラウザの表示内容を変更します。
ステート処理の使い方と説明
ステートを使うには useState 関数を使います。
// ステート
const [val, setVal] = React.useState('first');この関数の引数には保持したいデータの初期値を設定します。この関数から配列が返却され、第一要素はuseState関数で指定した引数の値が返却されます。第二要素は設定値を更新する関数が返却されます。
設定値を更新する関数へ設定したい値を設定すると、現在の設定値が更新され、画面に表示される内容が変更されます。
実例
やりたい事
3秒毎に現在時刻をブラウザへ表示させます。
ステート処理の例
Appコンポーネントを以下のように書き換えます。
import React from 'react';
function App() {
// 現在時刻を返却する
const showClock = () => {
const nowTime = new Date();
const nowHour = nowTime.getHours();
const nowMin = nowTime.getMinutes();
const nowSec = nowTime.getSeconds();
return "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
};
// ステート
const [val, setVal] = React.useState(showClock());
// 3秒ごとに現在時刻を更新する
setTimeout(() => {
setVal(showClock());
}, 3000);
return (
<div>{val}</div>
);
}
export default App;ステートの利用
以下がステートの利用を開始している箇所になります。
ステートの引数を指定するとステート値の初期値として設定されます。
ここでは、引数に現在時刻(showClock関数)を設定しているので、showClock関数の実行結果がステート値(val変数)の初期値として設定されます。
// ステート
const [val, setVal] = React.useState(showClock());現在時刻の返却
showClock関数は現在時刻を返却する関数です。
// 現在時刻を返却する
const showClock = () => {
const nowTime = new Date();
const nowHour = nowTime.getHours();
const nowMin = nowTime.getMinutes();
const nowSec = nowTime.getSeconds();
return "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
};ステート値の更新
setTimeout関数の中でスーテト値更新関数であるsetVal関数が実行されます。3秒置きにsetVal関数へ現在時刻(showClock関数)を設定しています。
// 3秒ごとに現在時刻を更新する
setTimeout(() => {
setVal(showClock());
}, 3000);ステート値の表示
ステート値である val をブラウザへ表示させます。3秒置きにsetVal関数へ現在時刻が設定され、これに伴い val の値も変更されるので、3秒置きに表示される内容も変わります。
return (
<div>{val}</div>
);最後に
特にありません。