关于typescript:②reactahooks源码分析之useToggle和useBoolean

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];
}

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据