関数コンポーネント

気力がぁ・・・
関数コンポーネントにしろと？

気力がぁ・・・

※Reactを学習したい人は「Reactチュートリアル」で学習してみてください。このブログはこのチュートリアルで感じたことや自分のメモを記述していきます。

ここまでReactのチュートリアルに沿って進めてきたが、約半分ぐらいが過ぎようとしている。フロントエンド技術のキャッチアップを目的として、かるーい気持ちで始めたわけでもないのだが、なかなか終わらない・・・。何か止める言い訳など考えてしまう今日この頃だ・・・。でもあと半分、頑張ろう・・・！

関数コンポーネントにしろと？

今まで一般的なコンポーネントを利用してきたが、Squareを関数コンポーネントに書き換えよとのチュートリアル様の指示だ。関数コンポーネントは「メソッドだけを有して自分の state を持たないコンポーネント」とのこと。要はこのようなコンポーネントを関数コンポーネントとすることで、書くのが楽だし、内部的なパフォーマンスに優れているのだろう。

コンポーネント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>
  );
}

class Square extends React.Component {

render() {

return (

<button

className="square" onClick={() => this.props.onClick()}>

{this.props.value}

</button>

);

}

//次のように変更

function Square(props) {

return (

{props.value}

</button>

);

}

うーん、この書き換えってコーディングする側として嬉しいか？単にReactの内部的な問題のようだが？内部的な問題なら記述を統一して最適になるように自動判断して欲しいところだが・・・。少し気力が失せているせいか、本日は後ろ向きな考えに偏ってしまうので、ここまでとする。

前へ＜ーーー＞つづく