React Hooks

##はじめに
勉強のメモです。
間違った記述や至らない点も多いと思います。

##ReactHooks
Classコンポーネントじゃないと扱えなかったStateやライフサイクルがFunctionalコンポーネントでも扱える様になる便利なもので2020年2月に正式リリースされた新しい機能になります。
また、以前のバージョンにも互換があるので既存のアプリに取り入れることも可能です。

##Hookのメリット
ClassコンポーネントにおいてStateやライフサイクルを記述すると冗長になりがちです。
見にくい記述は当然エラーを引き起こしやすくなります。
Hooksを使えば、StateやライフサイクルがFunctionalコンポーネントで記述できるので、シンプルにすることができます。

##useStateの使用例
Stateの代替になります。
今回はチェックボックスを例にします。

1.useState関数をインポート

import React, {useState} from 'react';

2.宣言する

const [isPublished, togglePublished] = useState(false);

isPublishedが変数名、togglePublishedがstateを変更する関数名、useState(false)が初期値。useState(trueにするとチェックボックスにチェックが付いている状態が初期値になる)

3.jsx内で使う

<input type='checkbox' checked= {isPublished} id="check" onClick={()=> togglePublished(!isPublished)}/>

useEffectの使用例

ライフサイクルの代替になります。
Stateの時の様にimportを行なってください。

基本形
マウントとアンマウントを繰り返し行うことで、クリーンアップできるという考えです。

useEffect(()=>{
console.log('render')
return () => {
  console.log('Unmounting')
  } 
})

##最後に
ライフサイクルの方はClassコンポーネントとHookを使った場合を比較した方がわかりやすいと思いますので、ぜひ、ご自身で試していただきたいです。