【React】Reactの基礎知識を学習した②（Props/State）

前回
hitoto28.hatenablog.com

PropsとState
Reactコンポーネントがデータを受け取ったり表示したりするための方法。

Props・・・コンポーネント利用時に属性として設定できる値
State・・・コンポーネントが持っている状態

Propsは不変、Stateは可変のデータを扱う。
またStateの値を更新するとコンポーネントのrender()メソッドが実行され再描画される。

Propsの基本的な使い方
以下はSampleComponentというコンポーネントにPropsName1とPropsName2という２つのPropsを設定している。
設定したPropsはSampleComponent内のメソッドでthis.propsオブジェクトで利用できる。

//コンポーネントの作成
class SampleComponent extends React.Component {
  render() {
    return (
      <div>
        props1 : {this.props.PropsName1}
        props2 : {this.props.PropsName2}
      </div>
    )
  }
};
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent PropsName1="PropsValue1" PropsName2="PropsValue2" />,
  document.getElementById('root')
);

Stateless Functionsで利用する場合、引数にpropsとして定義する。

//コンポーネントの作成
function SampleComponent(props) {
  return (
    <div>
      props1 : {props.PropsName1}
      props2 : {props.PropsName2}
    </div>
  )
};
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent PropsName1="PropsValue1" PropsName2="PropsValue2" />,
  document.getElementById('root')
);

↑正常にデプロイできればこのように表示されるはず
改行コードを入れたいところだが一手間かかりそうなので今回はパス

Propsをスプレット演算子でまとめて展開
スプレッド演算子（…）を用いてオブジェクトを展開して設定することもできる。
定義したいPropsが複数ある場合は以下のようにオブジェクトとして定義しておき、まとめてコンポーネントに引き渡す。

//コンポーネントの作成
function SampleComponent(props) {
  return (
    <div>
      props1 : {props.PropsName1}
      props2 : {props.PropsName2}
    </div>
  )
};
//Propsの定義
const myProps = {
  PropsName1 : 'aaa',
  PropsName2 : 'bbb'
}
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent {...myProps} />,
  document.getElementById('root')
);

defaultPropsで初期値を設定
defaultPropsでPropsの初期値を設定しておけば属性としてPropsが定義されていなくてもPropsが利用できる。

//コンポーネントの作成
function SampleComponent(props) {
  return (
    <div>
      props1 : {props.PropsName1}
      props2 : {props.PropsName2}
    </div>
  )
};
//defaultPropsの定義
SampleComponent.defaultProps = {
  PropsName1 : 'AAA',
  PropsName2 : 'BBB'
}
//コンポーネントの描画
ReactDOM.render(
  <SampleComponent/>,
  document.getElementById('root')
);

Stateの使い方
Stateはコンポーネント利用時に設定ができる値で、Propsと違い後から変更できる。

使い方はコンポーネント作成時にconstructorメソッド内でthis.stateオブジェクトに値を指定しておくことで他のメソッドからthis.stateとして取得することができる。

//コンポーネントの作成
class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState1 : 'aaa',
      myState2 : 'bbb'
    };
  }
  render() {
    return (
      <div>
        State1 : {this.state.myState1}
        State2 : {this.state.myState2}
      </div>
    )
  }
};
 //コンポーネントの描画
ReactDOM.render(
  <SampleComponent />,
  document.getElementById('root')
);

Stateを更新する場合はsetStateメソッドを使う。
setStateメソッドが実行されると即座にコンポーネントが再描画されHTMLに反映される。
以下のサンプルでは１秒毎にStateを更新し再描画を行なっている。

//コンポーネントの作成
class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState : 1
    };
    //1秒ごとにStateを更新する
    setInterval(()=>{
      this.setState({
        myState : this.state.myState + 1
      });
    },1000);
  }
  render() {
    return (
      <div>
        State : {this.state.myState}
      </div>
    )
  }
};
 //コンポーネントの描画
ReactDOM.render(
  <SampleComponent/>,
  document.getElementById('root')
);

UI変更に不要なプロパティはStateではなくPropsで管理すること。

↓参考サイト様
React入門 - to-R Media
React における State と Props の違い