- はじめに Reactの「State」と「Props」について概要を把握したところで、今度は「State」について深く理解していきましょう。GeekとGalがReactコンポーネントのStateの概念を探求します。
ReactのStateについてもっと学びたい？
もちろん！やってみよう！
いいね！Stateはコンポーネントの内部データを表していて、時間とともに変化することがあり、コンポーネントが再レンダリングされる原因になるのよ。
- クラスコンポーネントでのState
クラスコンポーネントでは、コンストラクタでStateを定義できるわ。例を見てみましょう！
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
}
なるほど、コンストラクタで
this.state
を使ってStateを定義するんだね！
そうなの！クラスコンポーネントでStateを更新するには、
setState
メソッドを使うの。
this.state
を直接変更するのではなく、
setState
を使ってコンポーネントが正しく再レンダリングされるようにすることが重要なのよ。
incrementCount() {
this.setState({ count: this.state.count + 1 });
}
- 関数コンポーネントでのState
さあ、フックを使って関数コンポーネントでどのようにStateを管理するか見てみましょう！
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
}
わかった！関数コンポーネントでStateを管理するには、
useState
フックを使うんだね！
その通り！
useState
は、現在のStateの値とStateを更新する関数の2つの要素を持つ配列を返すの。それらに名前をつけるために、配列の分割代入を使うことができるわ。例えば、
[count, setCount]
とかね。
function incrementCount() {
setCount(count + 1);
}
なるほど、関数コンポーネントでStateを更新するには、
setCount
のようなState更新関数を使うんだね！
その通り！Stateを更新することで、動的でインタラクティブなコンポーネントを作成することができるのよ！
- おもしろい例
Stateを使った面白い例はどんなものがある？
ボタンをクリックするとランダムなジョークを生成する「ランダムジョークジェネレータ」コンポーネントを作ってみましょう！
import React, { useState } from 'react';
function RandomJokeGenerator() {
const jokes = ['Joke 1', 'Joke 2', 'Joke 3', 'Joke 4'];
const [joke, setJoke] = useState('');
function generateJoke() {
const randomIndex = Math.floor(Math.random() * jokes.length);
setJoke(jokes[randomIndex]);
}
return (
<div>
<h1>Joke: {joke}</h1>
<button onClick={generateJoke}>Generate Joke</button>
</div>
);
}
はは、面白い例だね！Stateを使ってランダムジョークジェネレータコンポーネントを作っているんだ！
気に入ってもらえてうれしいわ！練習を続けて、Stateを使ったもっとエキサイティングなコンポーネントを作ってね！
- おわりに Stateは、Reactコンポーネントの内部データを管理する上で重要です。