介绍

状态管理，主要介绍下：useCountDown（倒计时）、useBoolean（布尔管理）、useToggle（两种状态切换）、MockSet（Set类型管理）、Object（Object类型管理）、useCounter（数字类型管理）、useNetwork（网络连接状态）、MockWhyDidYouUpdate（什么导致渲染 render）

在线观看: Domesy/State

布尔值

useBoolean：切换布尔值

  • toggle：触发可改变其状态值
  • setTrue：将状态设置为true

  • setFalse：将状态设置为false

    代码演示

    image.png

    详细代码

    1. import React from 'react';
    2. import { Button } from 'antd';
    3. import { useBoolean } from 'ahooks';
    5. const Mock: React.FC<any> = () => {
    6.   const [state, { toggle, setTrue, setFalse }] = useBoolean(true);
    8.   return (
    9.     <>
    10.       <p>状态值：{JSON.stringify(state)}</p>
    11.       <div style={{display: 'flex', justifyContent: 'flex-start'}}>
    12.         <Button type='primary' onClick={() => toggle()}>
    13.           切换
    14.         </Button>
    15.         <Button type='primary' onClick={() => setFalse()} style={{margin:'0 30px'}}>
    16.           设置false
    17.         </Button>
    18.         <Button type='primary' onClick={() => setTrue()}>
    19.           设置true
    20.         </Button>
    21.       </div>
    22.     </>
    23.   );
    24. };
    26. export default Mock;

    两种状态切换

    useToggle: 普通用法月 useBoolean 的用法一致，高级用法，可支持两种状态之间的切换``

  • state：状态值

  • toggle：触发状态更改的函数
  • setLeft：设置为 defaultValue

  • setRight：设置为 reverseValue

    代码演示

    image.png

    详细代码

    1. import React from 'react';
    2. import { Button } from 'antd';
    3. import { useToggle } from 'ahooks';
    5. const Mock: React.FC<any> = () => {
    6. const [state, { toggle, setLeft, setRight }] = useToggle('Hello', 'World');
    7. const [boolean , { toggle:toggleBool }] = useToggle(false);
    9. return (
    10.   <>
    11.     <div style={{fontWeight: 'bolder'}}>基础用法（与useBoolean使用一直）:</div>
    12.     <div style={{marginTop: 8, fontWeight: 'bolder'}}>状态：{JSON.stringify(boolean)}</div>
    13.     <div style={{justifyContent: 'flex-start', display:'flex', marginTop: 8}}>
    14.       <Button type='primary' style={{marginRight: 8}} onClick={() =>  toggleBool()}>切换</Button>
    15.       <Button type='primary' style={{marginRight: 8}} onClick={() =>  toggleBool(false)}>切换1</Button>
    16.       <Button type='primary' style={{marginRight: 8}} onClick={() =>  toggleBool(true)}>切换2</Button>
    18.     </div>
    19.     <div style={{marginTop: 8, fontWeight: 'bolder'}}>高级用法:</div>
    20.     <div style={{marginTop: 8}}>两种状态切换：{state}</div>
    21.     <div style={{justifyContent: 'flex-start', display:'flex', marginTop: 8}}>
    22.       <Button type='primary' style={{marginRight: 8}} onClick={() =>  toggle()}>切换</Button>
    23.       <Button type='primary' style={{marginRight: 8}} onClick={() => toggle('Hello1')} >切换为 hello</Button>
    24.       <Button type='primary' style={{marginRight: 8}} onClick={() => toggle('World')} >切换为 World</Button>
    25.     </div>
    26.     <div style={{justifyContent: 'flex-start', display:'flex', marginTop: 8}}>
    27.       <Button type='primary' style={{marginRight: 8}} onClick={() => setLeft()} >设置为Hello</Button>
    28.       <Button type='primary' style={{marginRight: 8}} onClick={() => setRight()} >设置为World</Button>
    29.     </div>
    30.   </>
    31. );
    32. };
    34. export default Mock;

    可管理的Set类型

    useSet: 包含 set(Set对象)，有功能：添加元素（add）、移除元素（remove）、判断元素是否存在（hsa）、重置（reset）功能

  • set: Set 对象

  • add： 添加元素
  • has：判断是否存在元素
  • remove： 移除元素
  • reset：重置为默认值

  • initialValue： 传入默认的 Set 参数

    代码演示

    image.png

    详细代码

    1. import React from 'react';
    2. import { Button } from 'antd';
    3. import { useSet, useCounter } from 'ahooks';
    5. const Mock: React.FC<any> = () => {
    6.   const [set, { add, has, remove, reset }] = useSet(['Hello']);
    7.   const [current, { inc, reset:countReset }] = useCounter(1);
    9.   return (
    10.     <>
    11.       <div style={{justifyContent: 'flex-start', display:'flex',}}>
    12.         <Button type='primary' style={{marginRight: 8}} onClick={() => {
    13.           inc()
    14.           add(String(Method.getDate({add: current})))
    15.         }}>
    16.           日期加1
    17.         </Button>
    18.         <Button type='primary' style={{marginRight: 8}} onClick={() => remove('Hello')} disabled={!has('Hello')} >删除 Hello</Button>
    19.         <Button type='primary' style={{marginRight: 8}} onClick={() => {reset(); countReset()}} >重置</Button>
    20.       </div>
    22.       <div style={{ marginTop: 16 }}>
    23.         <pre>{JSON.stringify(Array.from(set), null, 2)}</pre>
    24.       </div>
    25.     </>
    26.   );
    27. }
    29. export default Mock;

    管理Object类型

    useSetState: 简而言之，就是类组件的 this.setState, 他可以接收任意组件的类型

    代码演示

    image.png

    详细代码

    ```typescript import React from ‘react’; import { Button } from ‘antd’; import { useSetState } from ‘ahooks’;

    interface State { hello: string; count: number;

  1. [key: string]: any;

}

const Mock: React.FC = () => { const [state, setState] = useSetState({ hello: ‘’, count: 0, });

  1. return (
  2.   <>
  3.     <div style={{justifyContent: 'flex-start', display:'flex',}}>
  4.       <Button type='primary' style={{marginRight: 8}} onClick={() => setState({ hello: 'domesy' })}>
  5.         设置 hello
  6.       </Button>
  7.       <Button type='primary' style={{marginRight: 8}} onClick={() => setState({ domesy: '欢迎👏🏻' })} >设置任意值，domesy</Button>
  8.       <Button type='primary' style={{marginRight: 8}} onClick={() => setState((prev) => ({ count: prev.count + 1 }))} >加1</Button>
  9.     </div>
  10.     <pre>{JSON.stringify(state, null, 2)}</pre>
  11.   </>
  12. );

};

export default Mock;

  1. <a name="yultY"></a>
  2. ## 数字类型
  4. - **useCounter: 数字管理器**
  5. - **可以设置数字的范围，如：最大值、最小值，并有操作 增加，减少，设置，重置四个功能**
  6. - **无论是初始值还是，增加，减少，所设定的值在 最大、最小值之间，如过高于最大值，则 current 为最大值，反之亦然**
  7. <a name="otMGL"></a>
  8. ### 代码演示
  9. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/310196/1636104324925-ab4ace6f-2de3-4c52-8f10-4745c60ac35c.png#clientId=uffbaa07b-2305-4&from=paste&height=160&id=udad35304&margin=%5Bobject%20Object%5D&name=image.png&originHeight=160&originWidth=932&originalType=binary&ratio=1&size=20908&status=done&style=none&taskId=u7887a00d-e155-41d3-ae5e-7318e2585d9&width=932)
  10. <a name="QMYUS"></a>
  11. ### 详细代码 
  12. ```typescript
  13. import React from 'react';
  14.   import { Button } from 'antd';
  15.   import { useCounter } from 'ahooks';
  17.   const Mock: React.FC<any> = () => {
  18.     const [current, { inc, dec, set, reset }] = useCounter(100, { min: 1, max: 10 });
  20.     return (
  21.       <>
  22.         <div>数字：{ current } 范围（最小：1，最大为：10）</div>
  23.         <div style={{display: 'flex',justifyContent: 'flex-start', marginTop: 8}}>
  24.           <Button type="primary" style={{marginRight: 8}} onClick={() => inc()}>加1</Button>
  25.           <Button type="primary" style={{marginRight: 8}} onClick={() => inc(2)}>加2</Button>
  26.           <Button type="primary" style={{marginRight: 8}} onClick={() => dec()}>减一</Button>
  27.           <Button type="primary" style={{marginRight: 8}} onClick={() => set(3)}>设置为3</Button>
  28.           <Button type="primary" onClick={() => reset()}>重置</Button>
  29.         </div>
  30.       </>
  31.     );
  32.     };
  34.   export default Mock;

倒计时

  • useCountDown: 倒计时
  • 首先有两个值，一个是目标值（targetDate），一个是设置值，如果不设置初始值（setTargetDate），则默认为现在
  • 会自动计算离目标值的天月周等（formattedRes），同时也有据目标值的时间戳（countdown），注意这里的单位是毫秒，所以精确到秒为 Math.round(countdown / 1000)

  • 有常用的倒计时功能，并能控制停止时所触发的函数（onEnd）

    代码演示

    image.png

    详细代码

    ```typescript import React, { useEffect } from ‘react’; import { Button, message } from ‘antd’; import { useBoolean } from ‘ahooks’; import { Method } from ‘@/utils’; const CountDownTest1: React.FC = () => { const [countdown, setTargetDate, formattedRes] = useCountDown({

    1. targetDate: Method.getDate({add: 3}),

    });

    useEffect(() => {

    1. setTargetDate(Method.getDate({add: 2}))

    }, [])

    const { days, hours, minutes, seconds, milliseconds } = formattedRes;

    return

    设置时间为后天，目标时间为大后天：{days} 天， {hours} 小时 {minutes} 分钟 {seconds} 秒 {milliseconds}
    }

    const CountDownTest2: React.FC = () => { const [countdown, setTargetDate, formattedRes] = useCountDown({

    1. onEnd: () => {
    2.   message.info('已停止!')
    3. }

    });

    return 

    1. 倒计时：
    2. <Button style={{margin: '0 24px'}} type='primary' onClick={() => {
    3.   setTargetDate(Date.now() + 60000);
    4. }}>{countdown === 0 ? '倒计时' : "Math.round(countdown / 1000)" +s}</Button>
    5. <Button onClick={() => {
    6.   setTargetDate(undefined);
    7. }}>停止 </Button>

    }

    const Mock: React.FC = () => { const [countdown, setTargetDate, formattedRes] = useCountDown({

    1. targetDate: Method.getDate({add: 1}),

    });

    const { days, hours, minutes, seconds, milliseconds } = formattedRes;

    return (

    1. <>
    2.   <div>距离下一天0点的数据：{days} 天， {hours} 小时 {minutes} 分钟 {seconds} 秒 {milliseconds}</div>
    3.   <div></div>
    4.   <CountDownTest1 />
    5.   <div></div>
    6.   <CountDownTest2 />
    7. </>

    };

    export default Mock;

  1. <a name="ZiOWN"></a>
  2. ## 网络连接状态
  4. - **useNetwork: 网络连接状态的一些信息**
  5. <a name="byeJt"></a>
  6. ### 代码演示
  7. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/310196/1636104509474-9a15d188-bfad-482f-9994-ae35996f4873.png#clientId=uffbaa07b-2305-4&from=paste&height=444&id=uda88b1ce&margin=%5Bobject%20Object%5D&name=image.png&originHeight=444&originWidth=802&originalType=binary&ratio=1&size=65710&status=done&style=none&taskId=u45291b93-f396-4960-8f7c-d2f1d83549e&width=802)
  8. <a name="fPHyz"></a>
  9. ### 详细代码 
  10. ```typescript
  11.   import React from 'react';
  12.   import { Button } from 'antd';
  13.   import { useCounter } from 'ahooks';
  15.   const Mock: React.FC<any> = () => {
  16.     const [current, { inc, dec, set, reset }] = useCounter(100, { min: 1, max: 10 });
  18.     return (
  19.       <>
  20.         <div>数字：{ current } 范围（最小：1，最大为：10）</div>
  21.         <div style={{display: 'flex',justifyContent: 'flex-start', marginTop: 8}}>
  22.           <Button type="primary" style={{marginRight: 8}} onClick={() => inc()}>加1</Button>
  23.           <Button type="primary" style={{marginRight: 8}} onClick={() => inc(2)}>加2</Button>
  24.           <Button type="primary" style={{marginRight: 8}} onClick={() => dec()}>减一</Button>
  25.           <Button type="primary" style={{marginRight: 8}} onClick={() => set(3)}>设置为3</Button>
  26.           <Button type="primary" onClick={() => reset()}>重置</Button>
  27.         </div>
  28.       </>
  29.     );
  30.     };
  32.   export default Mock;

什么导致渲染了render

useWhyDidYouUpdate: 他可以帮助我们开发快速定位是那些参数导致的渲染，然后让其尽量避免渲染，从而优化星呢性能

代码演示

image.png

详细代码

  1. import React,{ useState } from 'react';
  2.   import { Button } from 'antd';
  3.   import { useWhyDidYouUpdate } from 'ahooks';
  5.   const Demo: React.FC<{ count: number }> = (props) => {
  6.     const [randomNum, setRandomNum] = useState(Math.random());
  8.     useWhyDidYouUpdate('useWhyDidYouUpdateComponent', { ...props, randomNum });
  10.     return (
  11.       <div>
  12.         <p>父传子的 number: {props.count}</p>
  13.         <div>子组件的随机数：{randomNum}</div>
  14.         <Button type="primary" style={{margin: '8px 0'}} onClick={() => setRandomNum(Math.random)}>更改子组件🎲</Button>
  15.       </div>
  16.     )
  17.   }
  19.   const Mock: React.FC<any> = () => {
  20.     const [count, setCount] = useState(0);
  22.     return (
  23.       <>
  24.         <div style={{fontWeight: 'bolder', marginBottom: 8}}>需要在控制台查看是什么引起的 render</div>
  25.         <Demo count={count} />
  26.         <div style={{justifyContent: 'flex-start', display:'flex', marginTop: 8}}>
  27.           <Button type='primary' style={{marginRight: 8}} onClick={() => setCount((prevCount) => prevCount + 1)}>加1</Button>
  28.           <Button type='primary' style={{marginRight: 8}} onClick={() => setCount((prevCount) => prevCount - 1)} >减1</Button>
  29.         </div>
  30.       </>
  31.     );
  32.   };
  34.   export default Mock;