React Hookとは上記のReactの機能をクラスを使用せずに使える機能です。

Hooksは関数コンポーネントという扱いで、React16.8から追加された機能になります。


Reactには記述方法が以下の２種類があります。

　■クラスコンポーネント

　■関数コンポーネント

上記の２種でHooksが追加される前はクラスコンポーネントで記述するのが一般的となっていました。


理由としては当時はクラスコンポーネントにのみ

　■変数などの状態管理

　■ライフサイクル

などの機能があるのですが、当時の関数コンポーネントではそれらの機能がありませんでした。

そのため、関数コンポーネントよりもクラスコンポーネントを主に使用していました。


ですが、Hooksの機能が追加されたことにより、関数コンポーネントで状態管理・ライフサイクルなどの機能を使用できるようになりました。

後述しますがクラスコンポーネントよりも関数コンポーネントのほうがコード量が少なく、読みやすいため書きやすく再利用が容易になります。

useEffect、useStateはReact Hooksというクラスを使用せずにReactを書くことができる機能の一つです。

useStateは関数コンポーネントのState（状態）を保持、更新するための機能です。

例えばカウンターを作成したとすると、カウント数の保持やカウント数の増減などの状態を変更します。


useEffectはDOMの変更やファイルの書き込みなどのイベント処理の発火タイミングを指定することができます。

主な使用としては外部APIなおからデータの取得をする場合などに使用されます。

その際にはasync awaitなどの非同期処理構文を使用することがあります。

関数

　const 関数名　＝ (引数(props)) => {
   return <h1>{引数}</h1>
  }

クラス

　class クラス名 extends 継承するクラス{
　　render(){
      cpmst { 引数 } = this.引数(props);
      return <h1>{ 引数 }</h1>;
    }
  }

関数の場合

■useEffect、useState

　import { useState, useState } from "react":

  function App(){
   const [状態を格納する変数、状態を変更する関数] = useState(初期値);
   
   useEffect(() => {
    <div>
     //変更した状態を表示
     <p>count : {useState}</p>
　　 //ボタンをクリックして状態を変更
     <button onClick-{() -> setState(count + 1)}>Click</button>
    </div>
   }

   retrun (
    <div>
      <p>クリック回数：{useState}</p>
      <button onClik={() => setState(count + 1)}>
        Click
      </button>
    </div>
   );
};

クラスの場合

　class クラス名 extends 継承するクラス{
   constructor(引数(props)){
     super(引数(props));
     this.state - {
       count: 0,
      }
     }
   
    componentDidMount(){
     docuent.title = "${this.state.count} 回クリック"