stateの使い方

stateは、画面の状態を保存するためのものです。

例えば、カウントアップボタンを押すと画面に表示される数字が増えるページをReact.jsで作るとき。この数値は、stateを使って保存されています。

目次

stateを使う基本

stateを使うときには、React.Componentクラスのコンストラクターで、どんなものをstateとして持ちたいか定義します。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count : 0
		};
	};

	handleClick = () => {
		this.setState({
			count: this.state.count + 1,
		});
	};

	render() {
		return (
			<div>
				<button onClick={this.handleClick}>カウントアップ</button>
				<p>{this.state.count}</p>
			</div>
		);
	}
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

定義したstateの値を変更するには、React.Componentクラスで用意されているsetState関数を使います。そして、stateの値を変更すると、画面は再描画(再レンダリング)されます。

この再レンダリングと連動して、さらに何かを動かすような処理を書くこともあり、React.jsではよく使う概念です。

フック「useState」を使う方法が主流

React.jsの16.8バージョンからはフックと呼ばれるものが導入され、stateに関する処理をより少ないコードで書くことができるようになりました。