アリババのカスタムフックコードリーディング~useBoolean編~
2020年07月16日
アリババのカスタムフックをコードリーディング
React の理解を深めるために、アリババのカスタムフックのコードを読んでいこうと思います！
カスタムフックとはuseから始まりほかのフックを呼び出せる関数です。
自分独自のフックを作成することで、コンポーネントから React のロジックを抽出して再利用可能な関数を作ることが可能です！
OSS として多くのカスタムフックが公開されているなかでアリババを選んだ理由は、
わかりやすいドキュメントが用意されていること、有名企業であること、GitHub の Star 数が多いことがあります。
useBoolean フック
useBooleanは、true/falseの値を state 管理する hooks です。
前回ご紹介したuseToggleが管理してくれた値の型はnumber | string | booleanでしたが、
useBooleanはbooleanのみで、より限定された hooks になります。
API
const [ state, { toggle, setTrue, setFalse }] = useBoolean(defaultValue?: boolean,);
引数
| Property | Description | Type | Default |
|---|---|---|---|
| defaultValue | デフォルト値を設定（任意） | boolean | undefined | false |
戻り値
| Property | Description | Type |
|---|---|---|
| state | state の値 | boolean |
| actions | state の値を更新する関数たち | object |
戻り値の関数たち
| Property | Description | Type |
|---|---|---|
| toggle | state の値をトグルする | (value?: any) => void |
| setTrue | state に true をセット | () => void |
| setFalse | state に false をセット | () => void |
Usage
Effects：true
function Demo() {const [state, { toggle, setTrue, setFalse }] = useBoolean(true);return (<div><p>Effects：{JSON.stringify(state)}</p><Stack isInline spacing='2'><Button onClick={() => toggle()}>Toggle</Button><Button onClick={setFalse}>Set false</Button><Button onClick={setTrue}>Set true</Button></Stack></div>);}
👀
ホントにいろんなところで使いそう！！
Let’s コードリーディング!!!!
useBooleanがどんなカスタムフックか分かったので、どんな実装になっているかコードを読んでいきます！
🙌
ここからが本命！実装を読めば自分でも良いカスタムフックを作れちゃうはず！
全体像
import { useMemo } from 'react';import useToggle from '../useToggle';export interface Actions {setTrue: () => void;setFalse: () => void;toggle: (value?: boolean | undefined) => void;}export default function useBoolean(defaultValue = false): [boolean, Actions] {const [state, { toggle }] = useToggle(defaultValue);const actions: Actions = useMemo(() => {const setTrue = () => toggle(true);const setFalse = () => toggle(false);return { toggle, setTrue, setFalse };}, [toggle]);return [state, actions];}
考察
わりとシンプルな実装で、
stateとactionsを配列で返している。
return [state, actions];
stateはboolean型で初期値はdefaultValue
toggle関数によって状態が変わる。
(toggle関数の詳細はusetoggleについてのブログ記事を参照)
const [state, { toggle }] = useToggle(defaultValue);
actionsは3つの関数が値のオブジェクトで、
それぞれ
- stateの値をtrue⇔falseに切り替える関数
- stateの値をtrueにする関数
- stateの値をfalseにする関数
という関数である。
ちなみに、メモ化されていてtoggleに変更があると再評価される。
const actions: Actions = useMemo(() => {const setTrue = () => toggle(true);const setFalse = () => toggle(false);return { toggle, setTrue, setFalse };}, [toggle]);
まとめ
このフックスをもとに、ホバー中であるかとかクリックしたかどうかとかのフックスを作れそう！
ほかのフックスも引き続き読んで学ぶ！！
