【React】クラスコンポーネント

クラスコンポーネントとは？？

• 以前主流だったコンポーネントの作り方
  （現在の主流は2019年で追加された関数コンポーネント+Hooks）

クラスコンポーネントの問題点

1. Class構文が必要で複雑になりがちなため、面倒かつコードを追いにくい
2. ステートの管理が複雑なため、保守性が低い

書き方

まずは関数コンポーネント

const Example = () => {
  return <h3>関数コンポーネントだよ！！</h3>;
};

export default Example;

次にクラスコンポーネント

import { Component } from "react";

//Componentクラスを継承する
class Example extends Component{
  //jsxはrenderメソッドの中のreturnに記載する
  render(){
    return (
      <h3>クラスコンポーネントだよ！！</h3>
    )
  }
}

クラスコンポーネントはimport文で{Component}を呼び出し、クラスに継承しなければならない
JSXの記載もメソッドrenderメソッド内のreturnの中に記載する

この一文を出力するだけならまだ見やすいですが、さらにコードが増えると複雑になるようです。
私が関数コンポーネント＋Hooksが主流になっていて良かったと思うポイントはthisを使う必要がなくなるというところです。(thisが使われているコードを見ると頭がこんがらがります)上記の例では出てきていませんが、state参照をするときにthisを用いなければならないようです。

他にも様々な理由はあるようですが、基本的には関数コンポーネントを使いましょうとのことでした！