React propsとstateについて 入門
前回Reactの超入門ということで、プロジェクトの作成からReactでのブラウザ表示までを学びました。
今回は、Reactでも重要な要素であるprops・stateについて学習しようと思います。
初期プロジェクト作成に関しては、以下を参照ください。
スポンサーリンク
propsについて
「プロパティ」を意味していて、オブジェクトを引数として受け取り、React 要素を返すために利用します。
言葉だけだとちょっとわかりづらいかもしれませんので、実際にサンプルコード見てみましょう。
propsを使ってみよう
propsを使って、「こんにちは!React!!」を表示するようなコード例となります。
React.Componetを継承して、Greetクラスを作成・表示にはthis.props.nameを指定。
class Greet extends React.Component {
render() {
return <h1>{this.props.name}</h1>;
}
}
Greetのnameプロパティにこんにちは!React!!を入力値として渡します。
<Greet name="こんにちは!React!!" />
今回は、初期プロジェクトで作成されるApp.jsにコードを書いて表示しています。
// ビルドして確認
$ yarn start

propsの値が表示できることが確認できました。
また、複数Greetクラスを使って表示する際は、nameに与える入力値を変えるだけです。
<Greet name="おはよう!React!!" />
<Greet name="こんにちは!React!!" />
<Greet name="こんばんは!React!!" /

次にstateに関して、学んでいきましょう。
stateについて
コンポーネント内部で扱う変数を格納するのに利用されます。
stateの更新に関しては、this.setState()を利用します。
propsと何が違うのか?という疑問が出ると思いますが、以下のユースケースがあるようです。
ケース | props | state |
親コンポーネントから初期値を取得できるか | はい | はい |
親コンポーネントによって変更できるか | はい | いいえ |
コンポーネント内にデフォルト値を設定できるか | はい | はい |
コンポーネント内で変更ができるか | いいえ | はい |
子コンポーネントの初期値を設定できるか | はい | はい |
子コンポーネントで変更できるか | はい | いいえ |
stateを使ってみよう
App.jsを修正して、一定時間単位でカウントアップしていくサンプルコードでstateについて見ていきましょう。
サンプルコード全体
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
setInterval(
() => this.countup(),
1000
);
}
countup() {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<h1>カウンター: {this.state.count}</h1>
</div>
);
}
}
function App() {
return (
<div className="App">
<header className="App-header">
<Counter/>
</header>
</div>
);
}
ここから少しコードを分解して見ていきましょう!
Counterクラスのコンポーネントを呼び出す。
<Counter/>
constructorは、唯一stateに初期値を設定するため利用するものです。
通常stateの更新は、「this.setState()」を使います。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
stateに値を設定する場合は、{ count: 0 }オブジェクトとして設定する点に注意ください。
countup関数では、this.setStateでstate.countプロパティを+1しています。
countup() {
this.setState({
count: this.state.count + 1
});
}
順番前後してしまいましたが、countup関数を呼び出すのにcomponentDidMount()を定義しています。
このcomponentDidMount()は、出力がDOMにレンダーされた後に実行されるものです。
今回のように一定時間でcountをインクリメントしていくような時などに利用します。
componentDidMount() {
setInterval(
() => this.countup(),
1000
);
}
最後にrenderでstateのcountを表示するだけです。
render() {
return (
<div>
<h1>カウンター: {this.state.count}</h1>
</div>
);
}
$ yarn start
0から定期的に+1されるカウンターができました!

今回利用しなかったのですが、componentWillUnmount
()というComponentがDOMから削除される時に呼ばれれる関数も用意されています。
まとめ
propsとstateに関して、サンプルコードを動かしならが学んでみました。
自分も実務では、Reactを利用した経験がなかったので、使い勝手を曖昧に認識していた部分とかありましたが、以前に比べて理解することができました。