useToggle
剖析的源码来自：https://github.com/alibaba/ho...
首先，useToggle用于在两个状态值间切换的 Hook。默认为boolean类型，但不仅仅是boolean，也可依据具体情况传入须要的两个状态，并进行切换；同样性能虽利用useState也可实现，但不如从新实现一个hook来得便当。
根本用法
三个重载
- 第一个重载为boolean之间切换，初始状态默认为false。此时defaultValue为初始状态（true或false），reverseValue为另一个值。
- 第二个重载传入一个参数defaultValue，此时reverseValue为!defaultValue。
- 第三个重载传入两个参数，defaultValue和reverseValue。
四个办法
- setLeft：state批改为defaultValue。
- setRight：state批改为reverseValue。
- toggle：状态在defaultValue和reverseValue中切换。
- set：带参数，切换为defaultValue或者reverseValue。
应用示例
export default () => { const [state, { toggle, set, setLeft, setRight }] = useToggle('yes', 'no'); return ( <div> <p>{state}</p> <p> <button type="button" onClick={toggle}> Toggle </button> <button type="button" onClick={() => set('yes')} style={{ margin: '0 8px' }}> Set yes </button> <button type="button" onClick={() => set('no')}> Set no </button> <button type="button" onClick={setLeft} style={{ margin: '0 8px' }}> Set Left </button> <button type="button" onClick={setRight}> Set Right </button> </p> </div> );};源码剖析
import { useMemo, useState } from 'react';//定义了动作接口，内含四个办法export interface Actions<T> { setLeft: () => void; setRight: () => void; set: (value: T) => void; toggle: () => void;}//进行三次函数重载function useToggle<T = boolean>(): [boolean, Actions<T>];function useToggle<T>(defaultValue: T): [T, Actions<T>];function useToggle<T, U>(defaultValue: T, reverseValue: U): [T | U, Actions<T | U>];function useToggle<D, R>(defaultValue: D = false as unknown as D, reverseValue?: R) { //外部应用useState创立了根本的state，类型为联结类型D | R， //也就是传入的两种状态：defaultValue和reverseValue（如果有）的类型 const [state, setState] = useState<D | R>(defaultValue); //用useMemo包装，返回四个办法 const actions = useMemo(() => {//定义reverseValueOrigin，为reverseValue或!defaultValue（依据reverseValue是否存在） const reverseValueOrigin = (reverseValue === undefined ? !defaultValue : reverseValue) as D | R; const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue)); const set = (value: D | R) => setState(value); const setLeft = () => setState(defaultValue); const setRight = () => setState(reverseValueOrigin); return { toggle, set, setLeft, setRight, }; // useToggle ignore value change // }, [defaultValue, reverseValue]); }, []); return [state, actions];}export default useToggle;源码的外部逻辑较为简单：
- 首先定义了动作接口，蕴含该hook的四个扭转状态的办法。
- 外部应用了useState创立了根本的state，类型为联结类型（即传入的两个初始值的类型）。
- 应用useMemo定义四个扭转状态的办法并return。
- 值得注意的是在封装办法的时候应用了useMemo。
要点阐明：useMemo的应用
useMemo的作用跟useCallback类似，只是用法有所不同。useMemo的计算结果是回调函数中return的值，在useToggle源码中为四个办法
该hook返回一个memoized值，仅在第二项参数数组中的某一依赖项产生扭转时才会从新计算；而在上述应用场景中，依赖项为空数组，那么就在初始的时候只执行一次，当组件从新渲染时不会再执行，有助于缩小耗费。
参考资料：
https://react.docschina.org/d...
useBoolean
该hook用于治理 boolean 状态。能够看出useBoolean与useToggle很类似，只是适用范围更加狭隘；实际上useBoolean的确是应用useToggle封装，这也是本文将二者放在一起探讨的起因。
根本用法
四个办法
- setTrue：state批改为true。
- setFalse：state批改为false。
- toggle：状态在true和false中切换。
- set：带参数，将状态设置为true或false。
应用示例
const [state, { toggle, setTrue, setFalse }] = useBoolean(true);源码剖析
该源码较为简单，外部间接应用了useToggle进行封装。
import { useMemo } from 'react';import useToggle from '../useToggle';//规定了Actions接口，蕴含四个办法export interface Actions { setTrue: () => void; setFalse: () => void; set: (value: boolean) => void; toggle: () => void;}export default function useBoolean(defaultValue = false): [boolean, Actions] {//应用useToggle进行封装，并间接用了它的toggle, set办法 const [state, { toggle, set }] = useToggle(defaultValue);//用useMemo包装，返回四个办法 const actions: Actions = useMemo(() => { const setTrue = () => set(true); const setFalse = () => set(false); return { toggle, set: (v) => set(!!v), setTrue, setFalse, }; }, []); return [state, actions];}