【Hooks 小贴士】：state 相关 Hooks

WEBJ2EE

发布于 2021-03-16 10:57:47

1K0

发布于 2021-03-16 10:57:47

文章被收录于专栏：WebJ2EE

目录
1. useToggle、useBoolean
2. useHash、useLocation、useUrlState

1. useToggle、useBoolean

用途：用于封装常见业务逻辑：“两种状态互相切换”。

示例：

react-use（https://streamich.github.io/react-use/）
- useBoolean（useBoolean is an alias for useToggle. ）
- useToggle

import {useToggle} from 'react-use';

const Demo = () => {
  const [on, toggle] = useToggle(true);

  return (
    <div>
      <div>{on ? 'ON' : 'OFF'}</div>
      <button onClick={toggle}>Toggle</button>
      <button onClick={() => toggle(true)}>set ON</button>
      <button onClick={() => toggle(false)}>set OFF</button>
    </div>
  );
};

ahooks（https://ahooks.js.org/）
- useBoolean（useBoolean 采用 useToggle 实现）
- useToggle

import React from 'react';
import { useToggle } from 'ahooks';
export default () => {
  const [state, { toggle }] = useToggle();
  return (
    <div>
      <p>Effects：{`${state}`}</p>
      <p>
        <button type="button" onClick={() => toggle()}>
          Toggle
        </button>
        <button type="button" onClick={() => toggle(false)} style={{ margin: '0 8px' }}>
          Toggle False
        </button>
        <button type="button" onClick={() => toggle(true)}>
          Toggle True
        </button>
      </p>
    </div>
  );
};

import React from 'react';
import { useToggle } from 'ahooks';
export default () => {
  const [state, { toggle, setLeft, setRight }] = useToggle('Hello', 'World');
  return (
    <div>
      <p>Effects：{state}</p>
      <p>
        <button type="button" onClick={() => toggle()}>
          Toggle
        </button>
        <button type="button" onClick={() => toggle('Hello')} style={{ margin: '0 8px' }}>
          Toggle Hello
        </button>
        <button type="button" onClick={() => toggle('World')}>
          Toggle World
        </button>
        <button type="button" onClick={setLeft} style={{ margin: '0 8px' }}>
          Set Hello
        </button>
        <button type="button" onClick={setRight}>
          Set World
        </button>
      </p>
    </div>
  );
};

源码：

react-use 的 useToggle 使用 useReducer 实现，很直白。
- react-use 的 useBoolean 仅仅是 useToggle 的别名。

import { Reducer, useReducer } from 'react';

const toggleReducer = (state: boolean, nextValue?: any) =>
  typeof nextValue === 'boolean' ? nextValue : !state;

const useToggle = (initialValue: boolean): [boolean, (nextValue?: any) => void] => {
  return useReducer<Reducer<boolean, any>>(toggleReducer, initialValue);
};

export default useToggle;

ahooks 的 useToggle 使用 useState+useMemo 实现。

2. useHash、useLocation、useUrlState

用途：A hook that stores the state into url query parameters.

备注：

useHash、useLocation 是 react-use 中的实现
- react-use 通过封装浏览器原生能力 history、hashchange 事件实现。
useUrlState 是 ahooks 中的实现
- ahooks 通过 react-router 中的 useLoaction、useHistory 实现
- 个人偏向于 ahooks 中的 useUrlState，更实用一些

示例：

源码：

ahooks——useUrlState

react-use——useHash

参考：

ahooks——useBoolean、useToggle： https://ahooks.js.org/hooks/state/use-boolean https://ahooks.js.org/hooks/state/use-toggle react-use——useToggle： https://streamich.github.io/react-use/?path=/story/state-usetoggle--docs

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-02-23，如有侵权请联系 cloudcommunity@tencent.com 删除

react