【React.js State】ステートの使い方、書き方【ステート】

最近Reactを学習し始め、Reactの肝であるState(ステート)に関して記載していきます。

まずはこちらの記事でプロジェクトを作成してみて下さい。

State（ステート）とは？
サンプルコード
まとめ

State（ステート）とは？

簡単にいうと動的な状態管理によって画面を更新するために使用するものです。

難しいですね。。。
実際に使い方をみてみましょう。

サンプルコード

今回は時計をクリックすることで、ページを再読み込みせずに表示していきます。

import React from 'react';
import './App.css';

function App() {
  return (
    //<Clock />がないと動かないので注意
    <div className="container text-center">
      <Clock />
    </div>
  )
}
//ReactのもつComponentクラスを継承し、ClockClassのコンポーネントを作成
class Clock extends React.Component{
  //コンストラクターを呼ぶこれは定形文なので呪文と考えて下さい。
  constructor(props){
　　//おまじないだと思って下さい。（constructor内では必須）
    super(props)
    //今の時刻を取得
    this.now = new Date();
    //ステートを定義ー今回はtimeに時分秒を設定
    this.state = {
      time: `${this.now.getHours()}:${this.now.getMinutes()}:${this.now.getSeconds()}`
    }
    //こちらもステートを使う際の定形分これがないと動かない。
    this.refresh = this.refresh.bind(this);
  }
  refresh(){
    //今の時刻を取得
    this.now = new Date();
    //ステートを更新する。
    this.setState((state) => ({
      time: `${this.now.getHours()}:${this.now.getMinutes()}:${this.now.getSeconds()}`
    }));
  }
  //render内ーここに出力したいものを記載
  //今回はクリックした際に、時計を更新する。
  render(){
    //pタグ内がイベントでrefreshを呼び出している。
    //表示する項目はステートで初期化された時分秒
    return <p onClick={this.refresh}> {this.state.time}</p>
  }
}
export default App;

中のコメントに記載しているので、詳しくはコードを読んでみて下さい。

ざっくり説明するとやることは以下です。