React Hooks
React16.8から追加された機能
React Nativeでは0.59から使える
ただし、ExpoはReact Nativeをforkしてるので、Expoだともうちょい後で、sdk33から
何なのか
function componentにstatefulなlogicを持たせられる関数
何しろこれ
stateful logic(やstate)が切り出されたものであり、function componentにくっつけることができるものである
lifecycle methodsに代わるものとか考えちゃうとよくわからなくなる(なった)
なまじuseEffectとuseStateがあるせいでhookとは何かが分かりにくくなってる気がする
で、custom hookの使い所がわからなくなる(なった)
何が嬉しいか
function componentの構造を変えなくて済む
classにしなくて良い
function componentのままstateを持たせたりstateful logicを分離することができる
class使うとややこしいからね
thisの扱いとか
イベントハンドラのbindとか
そもそもfunction componentをclassにするにはほぼ全部書き直すことになる
逆も然り
Presentational ComponentsとContainer Componentsを分ける、みたいなことを関数で実現できる
custom hookを使ってできる
テストが書きやすい
"wrapper hell"に陥らない
render propやhigher-order componentのような構造に影響を与えるやり方でなく機能を付与できる
Material-UIのstyle変更がhookでできるようになったのが個人的にわかりやすい例だった
Presentational Componentsとかもwrapper hellに向かう
関心の分離
useState や useEffect は複数回使えるので、ロジックごとに呼べば良い componentDidMount とかは複数ロジックをその中に詰め込む必要があった複数書いた場合は上から順に実行される
結構好きかも
function componentでできることによって、ただのJSっぽくなったというか
classでlifecycle methods使うのってわかりづらかったんだなあ、ってのがわかった感じ
基本
useState と useEffect を使うReact function componentのトップレベルから呼ぶこと
公式ドキュメントの例.jsximport React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}stateにarray使うときの例.jsxconst [items, setItems] = useState([]);
addItem = (newItem) => {
setItems([
...items,
newItem
]);
}lifecycle methodsは使えない
lifecycle methodsが複雑化する問題も解決しようとしているのだから、まあ当たり前だ
useEffect 使うuseEffect
functional componentが関数として、副作用(effect)がある処理を行う時に使うhook
API呼び出しとか時間の経過とか
引数で渡した関数(effect)がrenderの度に呼ばれる
componentDidMount とか componentDidUpdate とかに相当することもこれでやるあと
componentWillUnmount にもマウントされた時と更新された時、とか分けて考えなくて良い
毎回呼んで欲しくない場合は第二引数で制御する
第二引数に渡す配列の中身はrenderの度に比較され、前と同じだったら、effectはスキップされる
第二引数の配列にオブジェクトを渡した場合は、一言で言えば
Object.is で判定される配列に複数要素入れた場合はどれか一つ変わってたら実行される
componentDidMount の如く、初回だけしか実行して欲しくない場合は、第二引数に空の配列を渡す空の配列は変化しないから
effectから関数をreturnすると、それはcomponentがunmountする時に呼ばれる
callbackにはasyncは使うものじゃない?
componentのlogicを再利用可能な関数として切り出すことができる
stateに関する処理の共通化とか
use で始まる名前で、他のHookを呼ぶ引数や返り値に決まりはない
呼ばれる度にstateはisolatedで、共有されない
reduxなどのライブラリとは相反する可能性がある
componentDidMount とか componentDidUpdate に詰め込まれがちだったstateful logicを分割できるようになるという状態管理系のライブラリも(状態管理を切り出すことで)これらを解決しようとしていた
Hooksは別のアプローチ
多分、component毎のstate管理をしやすくするアプローチ
Custom Hookもロジックを再利用するものであって、stateはシェアされない
ただ、
useReducer みたいなHookもあって、ふーむでもstoreを一つにするわけではなさそうだし、やっぱり中央管理とは逆っぽいような……?
stateを共有する方法もある
要するにcomponent毎のlistener(setState)をlistで持って、stateが変わる度に全listenerを呼んでる