React Hooks

useState()

・ステートフックと呼ばれる
・クラスコンポーネントでいう
　this.stateとthis.setState()を代替
・複数のstateを扱う時はstate毎に宣言

useState関数をインポート

import React, { useState } form 'react';

宣言する

const [stateの変数名, stateを変更させる関数名] = useState(stateの初期値);

JSX内で使う

const App = () => {
 stateを変更させる関数名(変更したstateの値)
};

useStateの実用例

import React,{useState} from 'react';

const Article = (props) => {
    const [isPublished, togglePublished] = useState(false);
    return(
        <div>
            <input type="checkbox" checked={isPublished} id="check" onClick={() => togglePublished(!isPublished)}/>
        </div>
    )
};

export default Article

useEffect

・ライフサイクルメソッドを代替できる
・Functional　Componentでライフサイクルを使える
・コードをまとめられる

①レンダー毎

・基本の形
・useEffect（）内にCallback関数を書く
・Callbackはレンダー毎に呼ばれる
・returnするCallback関数はアンマウント時に呼ばれる。（クリーンアップ関数）

useEffect(() => {
    console.log('render!')  
    // ここはレンダーごとに呼ばれる 
    return () => {
        console.log('unmounting!')
    }
})

②マウント時のみ

・第二引数の配列内の値を
　前回レンダーと今回レンダーで比較
　→変更があればCallback関数を実行
・第二引数に空の配列を渡すと
　最初の１回（マウント時）のみ実行される

useEffect(() => {
    console.log('render!')
}, []) 

③マウント＆アンマウント

・①と②の複合形
・通常のCallbackはマウント時のみ
・アンマウント時はreturn内のクリーンアップ関数が実行される

useEffect(() => {
    console.log('render!')
    return () => {
        console.log('unmounting!')
    }
}, [])

特定のレンダー時

・マウント時に実行される
・limitの値が変わった時に実行される

const [limmit, release] = useState(true);
useEffect(() => {
    console.log('render!')
    return () => {
        console.log('unmounting!')
    }
}, [limit])