5分で学ぶ React Hooks #React

この記事の目的

公式ページが Hooks がいかに素晴らしいかなどが書いてあって長いので、必要最低限な情報をまとめた。
これを読めば Hooks を知らない人でもレビューはできるようになるはず。（願望）

Hooks とは

React 16.8 で追加された機能。
ステートフック、副作用フック、コンテキストフック、リデューサフックなどがある。

Hooks のメリット

Class でゴリゴリ書かないといけないものが Function で書けるようになった。
シンプルに書ける、ボイラープレートを減らせる。

主に使うメソッド

ステートフック(useState)

useStete.js

const [a, setA] = useState(0)

使い方
useState の引数に初期値を渡す。
a には get が、setA には set の機能がある。

副作用フック(useEffect)

useEffect.js

useEffect(() => {
  a();
  return () => {
    b();
  };
}, [c]);

useEffect の中の a() がライフサイクルの componentDidMount と componentDidUpdate で実行される。
useEffect の返り値の b() がライフサイクルの componentWillUnmount と componentDidUpdate で実行される。
componentDidUpdate は b() → a() の順番で実行する。

useEffect の第二引数を指定しなかった場合、上記のタイミングで実行されるが、指定した場合は指定した値が変わっていない場合には実行されないようにできる。上記例であれば c の値が更新された場合にのみ実行されるようになる。パフォーマンス改善の為に使う。

複雑な設計になった際に使うメソッド

ここから先はメソッドの存在と必要なタイミングについて軽く触れるだけ。

コンテキストフック(useContext)

useContext.js

const value = useContext(MyContext);

親コンポーネントで指定した値を子コンポーネントが useContext 経由で取得できる。子コンポーネントに値をいちいち渡さなくて良くなる。
https://ja.reactjs.org/docs/hooks-reference.html#usecontext

リデューサフック(useReducer)

useReducer.js

const [state, dispatch] = useReducer(reducer, initialArg, init);

useStete の変異種。setXXX だとどんな値でも入れられてしまう為、値の変更方法を指定して意図せぬ値の変更を防ぐ為に使用する。
https://ja.reactjs.org/docs/hooks-reference.html#usereducer

まとめ

前に Redux を使ったがその時よりもシンプルにかけていい感じ。
自分で実装したい人は公式を読みましょう。
https://reactjs.org/docs/hooks-intro.html