【Reactやるなら知っておきたい】関数コンポーネントとクラスコンポーネントの違い

#はじめに
僕自身、現在React勉強中なのですが、
クラスコンポーネントと関数コンポーネントの二種類あることを理解していなかったため、
備忘録として残しておきます。
なにから勉強したらいいかわからない人はサラッと読んでみてください！

#Reactとは
facebook社が開発したJSのライブラリ
用途としてはUIのコンポーネントを作成するのに使われる

#【本題】関数コンポーネントとクラスコンポーネントの違い
###前提
#####★現在は主に関数コンポーネントを使用する
〈理由〉
以前は下記の機能がクラスコンポーネントでしか使用出来なかった
　■State(状態管理)
　■Lifecycle Hooks　
　- Lifecycle とは、Mounting、Updating、Unmountingの一連の流れの事
・Mounting(マウント):コンポーネントをレンダーする
・Updating(更新):コンポーネントのStateを更新する
・Unmounting(アンマウント):コンポーネントのレンダーが切れる
#####▶現在はHooks(React 16.8 で追加された新機能)により、どちらも使えるようになった。

##違いについて
#####【関数コンポーネント】
シンプルで、状態（state）を持たない。
渡された値に従って特定の固定要素を描画するだけ。
要はただの「関数」である。

#####【クラスコンポーネント】
classを用いてコンポーネントを定義する。
クラスコンポーネントは状態（state）を持つことができ、内容を柔軟に変化させることが可能
また、Reactに関するメソッドをクラスに実装することで、より便利な制御が可能となる。

##関数コンポーネント使うメリットなくない？？？？？
#####★そこで考案されたのがHooksである。
状態管理などが関数コンポーネントでも出来るようになった！
よってクラスコンポーネントと同等の機能を実現可能になった。
#####最低限、【useState】　【useEffect】　【useContext】　は習得しよう！

例えばuseStateというフックは関数コンポーネントに状態を持たせることができる。
（※HooksはすべてuseXXXという命名規則）

例

// お約束。フックを使うならそのフックを必ずimportする
import React, { useState } from 'react'

// set〇〇とキャメルケースで書こう(ちなみにset〇〇は関数です)
// useState(0)の(0)は初期値です
const App = () => {
  const [count, setCount] = useState(0)

// {count}には、stateで保存されているcountの値が表示されます
// {count}の値が変わるたびにレンダリングされます
// setCountを使わないと、countの値を変更することはできません
// また、setCountの引数に関数を渡すこともできます

  return (
    <>
      <p>現在、{count} 回押しました</p>
　　　　　　　　　　　　// このボタンがクリックされると、countの値が+1されて、{count}の表示が変わります
      <button onClick={() => setCount(count + 1)}>
        押すとイチ増えるよ
      </button>
    </>
  )
}

export default App

###同等の機能ならどっちでもよくない？？？？?
####★関数コンポーネントの方が、、、
#####1. thisやbindを多用しなくて良い
#####2. コードが短くシンプル
#####3. ロジックを共通化出来る

##最後に
今からReactを勉強するなら迷わず関数コンポーネントを使用して勉強しよう。
さらに、Hooksはカスタムフックといってロジックを再利用出来るようになっているのです。
下記のようなカスタムフックを提供するライブラリも出ているので調べてみては。
・react-use
・react-table
・Formik

#####引き続き、React関連の記事を書いていきますので宜しくお願いいたします。