介绍

主要包含：useCreation（结合 useMemo 或 useRef）、useEventEmitter（共享事件通知、useReactive（另一种useState）

在线地址 Domesy/Advanced

结合 useMemon 或 useRef

  • useCreation：是 useMemo 或 useRef 的替代品。
  • useMemo 不能保证被 memo 的值一定不会被重计算，而 useCreation 可以保证这一点
  • useRef 在基础上与 useCreation 使用场景类似，但在复杂常量的创建，useRef 却容易出现潜在的性能隐患
  • 如何使用：function useCreation(factory: () => T, deps: any[]): T
  • factory: 用来创建所需对象的函数，deps：触发的依赖项

代码演示

image.png

详细地址

  1. import React, { useState } from 'react';
  2.   import { Button } from 'antd';
  3.   import { useCreation } from 'ahooks';
  5.   class Foo {
  6.     constructor() {
  7.       this.data = Math.random();
  8.     }
  10.     data: number;
  11.   }
  13.   const Mock: React.FC<any> = () => {
  14.     const foo1 =  new Foo();
  15.     const foo = useCreation(() => new Foo(), []);
  16.     const [, setFlag] = useState({});
  18.     return (
  19.       <>
  20.         <div>未加入useCreation：{foo1.data}</div>
  21.         <div style={{marginTop: 8}}>组件渲染，却不会影响Foo的实例：{foo.data}</div>
  22.         <Button type='primary' style={{marginTop: 8}} onClick={() => {
  23.           setFlag({});
  24.         }}>渲染</Button>
  25.       </>
  26.     );
  27.   };
  29.   export default Mock;

共享事件通知

  • useEventEmitter：适合的是在距离较远的组件之间进行事件通知，或是在多个组件之间共享事件通知。
  • 当页面十分复杂的时候，我们需要事件的共享（而非参数的共享），这时我们需要 useEventEmitter
  • useEventEmitter 相当于 useImperativeHandle 的增强版，他可以多层级的传递，多个组件进行共享事件通知
  • 如何使用： const click = useEventEmitter();
  • 绑定事件（订阅事件）： click.useSubscription(callback: (val: T) => void)=> void
  • 调取事件（发送通知）： click.emit(val: T) => void

代码演示

image.png

详细地址

  1.  import React, { useState, useRef } from 'react';
  2.   import { Button } from 'antd';
  3.   import { useEventEmitter } from 'ahooks';
  4.   import { EventEmitter } from 'ahooks/lib/useEventEmitter';
  6.   const Children: React.FC<{click: EventEmitter<number>}> = ({ click }) => {
  8.     const [ count, setCount ] = useState<number>(0);
  9.     const ref = useRef<any>(null)
  11.     click.useSubscription((val) => {
  12.       val === 1 ? message.info('父组件点击的') : message.info('兄弟节点点击的')
  13.       ref.current.click();
  14.     })
  16.     const onClick = () => {
  17.       setCount(v => v+1)
  18.     }
  20.     return <>
  21.       <div>点击次数：{count}</div>
  22.       <Button ref={ref} type='primary' style={{margin: '8px 0'}} onClick={onClick} >子组件点击</Button>
  23.     </>
  24.   }
  26.   const Children1:  React.FC<{click: EventEmitter<number>}> = ({click}) => {
  27.     return <Button style={{marginTop: 8}} type="primary" onClick={() => click.emit(2)}>兄弟节点点击</Button>
  28.   }
  30.   const Mock: React.FC<any> = () => {
  31.     const click = useEventEmitter<number>();
  33.     return (
  34.       <>
  35.         <Children click={click} />
  36.         <div>
  37.           <Button  type='primary' onClick={() => {
  38.             click.emit(1)
  39.           }} >父组件组件点击</Button>
  40.         </div>
  41.         <Children1 click={click} ></Children1>
  42.       </>
  43.     );
  44.   };
  46.   export default Mock;

竞态锁

  • useLockFn：用于给一个异步函数增加竞态锁，防止并发执行。

代码演示

image.png

详细地址

  1. import React, { useState } from 'react';
  2.   import { Button } from 'antd';
  3.   import { useLockFn } from 'ahooks';
  5.   function mockApiRequest() {
  6.     return new Promise((resolve:any) => {
  7.       setTimeout(() => {
  8.         resolve();
  9.       }, 2000);
  10.     });
  11.   }
  13.   const Mock: React.FC<any> = () => {
  14.     const [count, setCount] = useState(0);
  16.     const submit = useLockFn(async () => {
  17.       message.info('开始执行')
  18.       await mockApiRequest();
  19.       setCount((v) => v + 1)
  20.       message.info('执行结束')
  21.     })
  23.     return (
  24.       <>
  25.         <div>点击次数：{count}</div>
  26.         <Button style={{marginTop: 8}} type='primary' onClick={submit} >点击</Button>
  27.       </>
  28.     );
  29.   };
  31.   export default Mock;

另一种useState

  • useReactive：一种数据响应式的操作体验,定义数据状态不需要写useState , 直接修改属性即可刷新视图。
  • 可进行任意属性的复制，包括操作属性，类似于全局变量，可以直接改变

代码演示

image.png

详细地址

  1. import React, { useState } from 'react';
  2.   import { Button } from 'antd';
  3.   import { useReactive } from 'ahooks';
  5.   const Mock: React.FC<any> = () => {
  7.     const state = useReactive<any>({
  8.       count: 0,
  9.       inputVal: 'hello',
  10.       bool: false,
  11.       arr: [],
  12.       bug: '',
  13.       bugs: ['domesy', 'react', 'hook'],
  14.       addBug(bug:string) {
  15.         this.bugs.push(bug);
  16.       },
  17.       get bugsCount() {
  18.         return this.bugs.length;
  19.       },
  20.     });
  22.     return (
  23.       <>
  24.         <div style={{fontWeight: 'bold'}}>基本使用：</div>
  25.         <div style={{marginTop: 8}}> 对数字进行操作：{state.count}</div>
  26.         <div style={{margin: '8px 0', display: 'flex',justifyContent: 'flex-start'}}>
  27.           <Button type="primary" onClick={() => state.count++ } >加1</Button>
  28.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.count-- } >减1</Button>
  29.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.count = 5 } >设置为5</Button>
  30.         </div>
  31.         <div style={{marginTop: 8}}> 对Boolean进行操作：{state.bool ? 'true' : 'false'}</div>
  32.         <div style={{margin: '8px 0', display: 'flex',justifyContent: 'flex-start'}}>
  33.           <Button type="primary" onClick={() => state.bool = !state.bool } >切换状态</Button>
  34.         </div>
  35.         <div style={{marginTop: 8}}> 对字符串进行操作：{state.inputVal}</div>
  36.         <div style={{margin: '8px 0', display: 'flex',justifyContent: 'flex-start'}}>
  37.           <Button type="primary" onClick={() => state.inputVal = 'hello' } >设置为 hello</Button>
  38.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.inputVal = 'word' } >设置为 word</Button>
  39.           <Button type="primary" style={{marginLeft: 8}}
  40.           onClick={() => {
  41.             if(state.inputVal === 'word'){
  42.               state.inputVal = 'hello'
  43.             }else{
  44.               state.inputVal = 'word'
  45.             }
  46.           }} >切换</Button>
  47.         </div>
  48.         <div style={{marginTop: 8}}> 对数组进行操作：{JSON.stringify(state.arr)}</div>
  49.         <div style={{margin: '8px 0', display: 'flex',justifyContent: 'flex-start'}}>
  50.           <Button type="primary" onClick={() => state.arr.push(Math.floor(Math.random() * 100))} >push</Button>
  51.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.arr.pop()} >pop</Button>
  52.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.arr.shift()} >shift</Button>
  53.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.arr.unshift(Math.floor(Math.random() * 100))} >unshift</Button>
  54.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.arr.reverse()} >reverse</Button>
  55.           <Button type="primary" style={{marginLeft: 8}} onClick={() => state.arr.sort()} >sort</Button>
  56.         </div>
  57.         <div style={{fontWeight: 'bold', marginTop: 8}}>计算属性：</div>
  58.         <div style={{marginTop: 8}}>数量：{ state.bugsCount } 个</div>
  59.         <div style={{margin: '8px 0'}}>
  60.           <form
  61.             onSubmit={(e) => {
  62.               state.bug ? state.addBug(state.bug) : state.addBug('domesy')
  63.               state.bug = '';
  64.               e.preventDefault();
  65.             }}
  66.           >
  67.             <input type="text" value={state.bug} onChange={(e) => (state.bug = e.target.value)} />
  68.             <button type="submit"  style={{marginLeft: 8}} >增加</button>
  69.             <Button type="primary" style={{marginLeft: 8}} onClick={() => state.bugs.pop()}>删除</Button>
  70.           </form>
  72.         </div>
  73.         <ul>
  74.           {
  75.             state.bugs.map((bug:any, index:number) => (
  76.               <li key={index}>{bug}</li>
  77.             ))
  78.           }
  79.         </ul>
  80.       </>
  81.     );
  82.   };
  84.   export default Mock;