kouの技術的メモ

学習した内容の定着やアウトプット用に開設しました

React Hooksとは

TypeScript&React

コンポーネントの組み立て方

React らしくて一番きれいなコンポーネントの作り方としては まず関数コンポーネントで見た目だけを整えた Presentational Component を作る。それをインポー トして Hooks や HOC で必要な機能を追加していって、別途 Container Component を作る、というの がスマートなやり方。

基本的にReactは関数でコンポーネントを作るのが望ましく、 Hooks登場以前はHOC(Higher Order Component高階コンポーネント)やRender Propsと言うやり方があった。

  • HOC(Higher Order Component高階コンポーネント) 高階関数が関数を引数に取るように、コンポーネントを引数にとり、戻り値としてコ ンポーネントを返す関数のこと。

Hooks

クラスコンポーネントを使わずに、関数コンポーネントに Local State やライフサイクルといった React の機能を 『接続する(hook into)』から Hooks。

HOCやRender Propsの弱点とされたもの、たとえばWrapper Hellになりやすい、可読性が低いといった点がほぼクリアされていて、コードが読みやすくシンプルになる。さらに state やライフサイクルを使うといったコンポーネントに付与したい機能をそこだけ切り出すことも簡単な ので、再利用しやすくテストしやすい。

StateとPropsのおさらい

State Hook

クラスコンポーネントの Local State に相当するものを関数コンポーネン トでも使えるようにする機能。 useStateを使う。

const [count, setCount] = useState(0);
setCount(100);
setCount(prevCount => prevCount + 1);

Effect Hook

Effect Hook （副作用フック）はクラスコンポーネントのライフサイクルメソッドcomponentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現す るもの。

ここで言うReactの副作用とは具体的には以下のものなどが該当する

  • DOMを変更する
  • APIとの通信
  • console.log
  • 変数への代入

コンポーネントのレンダリングの直前に実行させたい時（つまりcomponentDidMount()や componentDidUpdate()等を使うのと同じ）はuseEffectを使い以下のように書く。 例

useEffect(() => { 
　　doSomething();

　　return clearSomething();
 }, [watchVar]);

useEffectに渡した関数の中身、ここでは doSomething() がコンポーネントのレンダリングの直前に実行される。 componentDidMount()や componentDidUpdate() といったメソッド内に書くのと同じ。

関数は必 ずしも戻り値を必要としないが、戻り値に関数を設定すると、それはコンポーネントのアンマウン ト直前に実行されることになる。 これは componentWillUnmount() に書くのと同じ。

useEffect(第一引数（引数なしの関数）,第二引数（配列）) 第一引数にレンダリング直前に実行したい関数を入れる。 第二引数にその配列の中 に任意の変数を入れておくと、その値が前回のレンダリング時と変わらなければ第一引数で渡された 関数の中身の副作用処理実行がキャンセルされる。第二引数を省略するとレンダリング直前時に毎回第一引数が実行される。配列が空の場合は初回レンダリング直前時だけ実行される

逆にコンポーネントのアンマウン ト時に実行したい関数を描きたいときは第一引数で指定した関数の戻り値として関数を書く。

以下が例

useEffect(() => {
 レンダリング時に実行したい処理；

 return アンマウン ト時に実行したい関数；

}
,第二引数（配列）)

Custom Hook

StateHookやEffectHookを内部で呼び出して使う関数を作りたいときはCustomHookと言うものを作る。 と言うかHooksを呼べるのはcunsomHooknのみ。

関数名はuseを先頭につける。