ステートフックの利用法を読む
ステートフック＝ useState のこと
フック
code:js
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
クラス
code:js
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
うごき
state は {count: 0 } から始まる
ユーザがボタンをクリックしたときに this.setState() を呼ぶことで state.count をインクリメントする
関数コンポーネントのおさらい
code:js
const Example = (props) => {
// You can use Hooks here!
return <div />;
}
フックを使う方法
useState を importする
code:js
import React, { useState } from 'react';
const Example = (props) => {
// ...
}
state 変数の宣言
クラス
コンストラクタ内で this.state を { count: 0 } にセットする
state である count を 0 へ初期化する
code:js
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
関数コンポーネント内
this は存在しない
その代わりにコンポーネントの内部で直接 useState フックを使う
code:js
import React, { useState } from 'react`;
const Example = () => {
}
useStateを呼ぶとstate変数が宣言される
useStateに引数として渡すのは初期値
useStateが返すのは現在のstateとそれを更新するための関数をペアにして返す
state が作成されるのはコンポーネントの初回レンダー時だけ
なので createState ではなく useState
state の読み出し
クラス
クラス内で現在のカウント値を表示したい場合this.state.count を読み出す
code:js
<p>You clicked {this.state.count} times</p>
関数コンポーネント内
関数内では直接 count を使える
code:js
<p>You clicked {count} times</p>
state の更新
クラス
this.setState() を呼ぶ
code:js
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
関数コンポーネント内
this は必要ない
code:js
<button onClock={() => setCount(count + 1}>
Click me
</button>
分割代入
code:js
count と setCount という名前の2つの変数を作っている
useState から返される値のうち1つ目を count に、2つ目を setCount に代入するのと同じ
以下と同じ
code:js
var countStateVariable = useState(0); // Returns a pair
var count = countStateVariable0; // First item in a pair var setCount = countStateVariable1; // Second item in a pair 特定の意味があるものに [0] や [1] を使うのは分かりづらいので分割代入を使っている