【React】公式のチュートリアルをやってみる～⑤関数コンポーネント

【React】公式のチュートリアルをやってみる～④stateのリフトアップ の続きです。
stateを持たないSquareコンポーネントを、シンプルに書くために関数コンポーネントに置き換えます。

Squareコンポーネントをクラスコンポーネントから関数コンポーネントに置き換える

変更前（クラスコンポーネント）

class Square extends React.Component {
  render() {
    return (
      <button 
        className="square" 
        onClick={() => this.props.onClick()}
      >
        {this.props.value}
      </button>
    );
  }
}

変更後（関数コンポーネント）

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  )
}

クラスコンポーネントと関数コンポーネントの違い

• クラスコンポーネント
  • stateを参照する時やメソッドを用いる時にthisを使う必要がある
• 関数コンポーネント
  • フックを用いるとthisを使う必要がなくなり、コードがシンプルになる
    • フックとは、Reactの機能に「接続 (hook into)」するための特別な関数で、stateの機能を関数コンポーネントに追加できる。useState, useEffectなどあるが、追々勉強する
  • React公式もこちらを推しているようだ

前回の記事と同じように、マスを押したらマスにXが表示されるようになってます。
関数コンポーネントの方がコード量少なくかけますね。

参考文献

• https://ja.reactjs.org/tutorial/tutorial.html#function-components
• https://ja.reactjs.org/docs/hooks-state.html
• https://ja.reactjs.org/docs/hooks-intro.html