Reactノート2

###参照
https://www.oreilly.co.jp/books/9784873117195/
https://www.to-r.net/media/

• 親から子へ一方通行

• コンポーネント(親から受け取ったプロパティを描画)

• コンポーネントは「内部状態」を保つことができる(内部でのみ変更されうる値)

• プロパティ(props)

• 状態(state)

#props

コンポーネントを作成するときに属性値として指定した値

• コンポーネントが作成された後からpropsを変更することは非推奨。

  var surveys = [{title: 'Superheroes'}];
  <ListSurveys surveys={surveys} />

##this.props

コンポーネントの中でプロパティの値にアクセス(参照)するにはthis.propsを使う。

index.js

  import React from 'react'
  import {render} from 'react-dom'

  class MyComponent extends React.Component {
    render() {
      return (
        <div>
          props1 : {this.props.myPropsName1}
          props2 : {this.props.myPropsName2}
        </div>
      )
    }
  };

  render(
    <MyComponent myPropsName1="myPropsValue1" myPropsName2="myPropsValue2" />,
    document.getElementById('root')
  );

##Stateless Functions

• 引数としてpropsが引き渡される
• propsオブジェクトで利用可能

index.js

  import React from 'react'
  import {render} from 'react-dom'

  function MyComponent(props) {
    return (
      <div>
        props1 : {props.myPropsName1}
        props2 : {props.myPropsName2}
      </div>
    )
  };
  //コンポーネントの描画
  render(
    <MyComponent myPropsName1="myPropsValue1" myPropsName2="myPropsValue2" />,
    document.getElementById('root')
  );

##JSXのスプレッドシンタックスを使う(一組のプロパティとして指定する場合)

index.js

  import React from 'react'
  import {render} from 'react-dom'

  function MyComponent(props) {
    return (
      <div>
        props1 : {props.myPropsName1}
        props2 : {props.myPropsName2}
      </div>
    )
  };

  const myProps = {
    myPropsName1 : 'myPropsValue1' ,
    myPropsName2 : 'myPropsValue2'
  }

  render(
    <MyComponent {...myProps} />,
    document.getElementById('root')
  );

##defaultPropsを設定する

index.js

  import React from 'react'
  import {render} from 'react-dom'

  function MyComponent(props) {
    return (
      <div>
        props1 : {props.myPropsName1}
        props2 : {props.myPropsName2}
      </div>
    )
  };
  MyComponent.defaultProps = {
    myPropsName1: 'myPropsValue1' ,
    myPropsName2: 'myPropsValue2'
  };

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

##propTypes

• 型指定

---

##state

後から変更できる
コンポーネントの機能に直接必要な単純なデータのみをstateに持たせること
要素の表示内容を決定するために使用される

• チェックボックスのチェックの有無により、オプションの表示/非表示

• オプションのリストがドロップダウン表示されているかどうかを保持するための真偽値

• 入力フィールドの値

constructorメソッド内でthis.stateオブジェクトに値を指定しておく
他のメソッドからthis.stateとして取得することが可能

index.js

  import React from 'react'
  import {render} from 'react-dom'

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        myState1 : 'foo01',
        myState2 : 'foo02'
      };
    }
    render() {
      return (
        <div>
          myState1 : {this.state.myState1}
          myState2 : {this.state.myState2}
        </div>
      )
    }
  };

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

#setStateメソッドを使う(更新する)

index.js

  import React from 'react'
  import {render} from 'react-dom'


  class MyComponent 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>
          myState : {this.state.myState}
        </div>
      )
    }
  };

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