React学習 propsとstate

#コンポーネントとは
Componentとは、特定の機能を持った汎用的な「部品」を指す言葉です。
Componentにより UI を独立した再利用できる部品に分割し、部品それぞれを分離して考えることができるようになります。
Component間のデータの受け渡しは「props」を利用する。

#propsとは
propsはプロパティの意味であり、関数の引数のように親からデータを渡して子のReact要素を返す役割を持っています。

// コンポーネント
class Greeting extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>{ this.props.type }</div>
    );
  }
}
// コンポーネントの呼び出し
ReactDOM.render(<Greeting type="Hello" />, document.getElementById('app'));

React がユーザ定義のコンポーネントを見つけた場合、JSX に記載のある属性と子要素をオブジェクトとしてコンポーネントに渡します。

#コンポーネントの作成方法

関数の場合

function Greeting (props) {
 return <h1>{props.type}</h1>
}

クラスの場合

class Greeting extends React.Component {
 render() {
    return <h1>{this.props.type}</h1>
 }
}

クラスの場合、コンポーネント定義でポイントとなるのは、React.Componentというコンポーネントを基底クラスとして継承することです。
そして、render()メソッドを定義することで、その戻り値でコンポーネントの表示内容を指定します。
また、タグ要素は、this.propsというオブジェクト型のプロパティを介して取得ができる。

アロー演算子の場合

const Greeting = (props) => (
 <h1>{props.type}</h1>
)

アロー演算子の場合、1文であればreturn文を省略できるので、最小限の記述で簡潔にコンポーネントの定義が可能。

#コンポーネントの状態管理
状態を管理するためには、コンポーネント自体に状態の値を記憶させておく必要がある。
状態の記述を行うには、コンポーネントのstateオブジェクトを利用する。

#stateとは
stateは状態を管理するもので、関数内で宣言された変数のようにコンポーネントの内部でデータを更新する役割を持っています。

class CheckTest extends React.Component {
  //コンストラクタ
  constructor(props) {
    super(props)
  // 状態の初期化
    this.state = {checked: false}
  }

  render () {
    // チェックされていない場合
    let mark = '□'
    let style = { fontWeight: 'normal' }

    // チェックされた場合
    if (this.state.checked) {
      mark = '■'
      style = { fontWeight: 'bold' }
    }

    // クリック時のイベント指定
    const clickHandler = (e) => {
      const newValue = !this.state.checked
      this.setState({checked: newValue})
    }

    return (
      <div onClick={clickHandler} style={style}>
        {mark} Hello
      </div>
    )
  }

コンストラクタ内のthis.state = {...}で初期値を設定。
setStateは状態を更新すると自動的にrender()を実行する。
チェックボックスをクリックするたびに、変数「checked」の真偽値が変化し、render()が実行されることで画面が再描画されます。

#Reactでのイベント記述方法
##render()内でイベントハンドラを定義する場合

class コンポーネント名 extends React.Component {
  render() {
    const handler = (e) => alert('Test')
    return <button onClick={handler}>AlertTest</button>
  }
}

##クラスのメソッドとしてイベントハンドラを定義する場合

class コンポーネント名 extends React.Component {
  constructor {
    this.alertHandler = this.alertHandler.bind(this)
  }
  alertHandler () {
    alert('Test')
  }
  render () {
    return <button onClick={this.alertHandler}>
      alertTest</button>
  }
}

複数のイベントを記載する場合には、複雑にならないようにクラスのメソッドとして定義します。
しかし、render()内でalertHandlerを呼び出す際に、alertHandlerメソッド内のthisが書き換わってしまうため、メソッドとthisを結び付けるためにバインド(bind)する必要があります。