ahooks 最好的react hook庫


官方文檔:https://ahooks.js.org/zh-CN/

以下總結一些個人認為非常實用的hook:

1)useRequest 請求

import {useRequest } from 'ahooks';

const getSome = async () => {};
const { data, loading, run } = useRequest(getSome, {
    debounceInterval: 500,
    manual: true,
  refreshDeps: [], // manual為false,可以按被動式觸發
});


<div>
    提交結果:{JSON.stringify(data)}
</div>
<Button loading={loading} onClick={run}>
   提交
</Button>

 

2) useDynamicList 動態表單

import { useDynamicList } from 'ahooks';
const { list, remove, getKey, push } = useDynamicList(['David', 'Jack']); const { getFieldDecorator, validateFields } = props.form; <Form> { list.map((item, index) => { <Form.Item key={getKey(index)}> {getFieldDecorator(`names[${getKey(index)}]`, { initialValue: item, rules: [{ required: true }], })(<Input />)} {list.length > 1 && <Icon type="minus-circle-o" onClick={() => remove(index)} />} <Icon type="plus-circle-o" onClick={() => push('')} /> </Form.Item> }) } </Form> <Button onClick={() => { const res = props.form.getFieldsValue().names; console.log((res || []).filter(item => item)) }}> 提交 </Button>

 

3) useVirtualList 虛擬滾動

import { useVirtualList } from 'ahooks';

const { list, containerProps, wrapperProps } = useVirtualList(Array.from(Array(99999).keys()), {
  overscan: 30, // 視區上、下額外展示的 dom 節點數量
  itemHeight: 60, // 行高度,靜態高度可以直接寫入像素值,動態高度可傳入函數
});

<div {...containerProps}>
  <div {...wrapperProps}>
    { list.map(item => <div key={item.index}>{item.data}</div>) }
  </div>
</div>

 

4) useDebounceFn 防抖

import { useDebounceFn } from 'ahooks';

const { run } = useDebounceFn(
  () => console.log('test'),
  { wait: 500 },
);

<div>
  <Button onClick={run}>
    Click fast!
  </Button>
</div>

 

5)useThrottleFn 節流

import { useThrottleFn } from 'ahooks';

const { run } = useThrottleFn(
  () => console.log('test'),
  { wait: 500 },
);

<div>
  <Button onClick={run}>
    Click fast!
  </Button>
</div>

 

6)useInterval 定時器

import { useInterval } from 'ahooks';

const [count, setCount] = useState(0);

useInterval(() => {
  setCount(count + 1);
}, 1000);

<div>count: {count}</div>;

 

7) 生命鈎子 useDebounceEffect、useThrottleEffect、useMount、useUpdateEffect、useUnmount、useUpdateLayoutEffect

 

8)useUrlState state 往 url query 帶上

import useUrlState from '@ahooksjs/use-url-state';

const [state, setState] = useUrlState(
  { page: '1', pageSize: '10' },
);

<button
  onClick={() => {
    setState((s) => ({ page: Number(s.page) + 1 }));
  }}
>
  翻頁
</button>

 

9) useCookieState state 存放到 cookie,下次回來還能

import { useCookieState } from 'ahooks';
const [message, setMessage]
= useCookieState('cookie-key'); <input value={message} onChange={(e) => setMessage(e.target.value)} />

 

10) useLocalStorageState state 存放到 localStorage

import { useLocalStorageState } from 'ahooks';
const [message, setMessage]
= useLocalStorageState('store-key', 'default value'); <input value={message || ''} onChange={(e) => setMessage(e.target.value)} />

 

11) useSessionStorageState state 存放到 sessionStorage

import { useSessionStorageState } from 'ahooks';
const [message, setMessage]
= useSessionStorageState('store-key', 'default-value'); <input value={message} onChange={(e) => { setMessage(e.target.value); }} />

 

12)在function comp上使用和class comp一樣的setState語法

import { useSetState } from 'ahooks';

const [state, setState] = useSetState<State>({
  hello: '',
  count: 0,
});

<Button onClick={() => setState({ hello: 'world' })}>
  只改變state.hello,不影響state.count
</Button>

 

13) useWhyDidYouUpdate 調試判斷什么參數導致組件update

import { useWhyDidYouUpdate } from 'ahooks';

const [randomNum, setRandomNum] = useState(Math.random());

// 當組件更新時,會在console打印出來哪個發生變動,導致組件update
useWhyDidYouUpdate('useWhyDidYouUpdateComponent', { ...props, randomNum });

 

14)判斷是否點擊到元素外面

import { useClickAway } from 'ahooks';

const ref = useRef<HTMLDivElement>();
useClickAway(() => {
  console.log('點擊到div外部了')
}, ref);

<div ref={ref}> test </div>

 

15)判斷頁面是否在可見狀態

import { useDocumentVisibility } from 'ahooks';

const documentVisibility = useDocumentVisibility();
useEffect(() => {
  if (documentVisibility === 'visible') {
    console.log('當前頁面在可見狀態');
  } else {
    console.log('當前頁面不在可見狀態');
  }
}, [documentVisibility]);

 

16)優雅的使用useEventListener

import { useEventListener } from 'ahooks';

const ref = useRef<HTMLDivElement>();
useEventListener('click', () => console.log('點擊了'), { target: ref });

<div ref={ref}>test</div>

 

17)讓dom元素全屏展示

import { useFullscreen } from 'ahooks';

const ref = useRef();
const [isFullscreen, { setFull, exitFull, toggleFull }] = useFullscreen(ref);
<div ref={ref}>
  {isFullscreen ? '全屏中' : '不在全屏中'}
</div>

 

18)判斷dom是否在可視區

import { useInViewport } from 'ahooks';

const ref = useRef();
const inViewPort = useInViewport(ref);

<div ref={ref}>
  {inViewPort ? 'div在可視區' : 'div不在可視區'}
</div>

 

19)js響應式窗口寬度判斷

import { configResponsive, useResponsive } from 'ahooks';

configResponsive({
  small: 0,
  middle: 800,
  large: 1200,
});

const responsive = useResponsive();
// responsive ---> {small: true, middle: true, large: false}

 

20)判斷dom寬高變化

import { useSize } from 'ahooks';

const ref = useRef();
const size = useSize(ref);

<div ref={ref}>
  try to resize the preview window <br />
  dimensions -- width: {size.width} px, height: {size.height} px
</div>

 

21)獲取選中的文案

import { useTextSelection } from 'ahooks';

const ref = useRef();
const selection = useTextSelection(ref);

<div ref={ref}>
  <p>Please swipe your mouse to select any text on this paragraph.</p>
</div>

 

21)代替useMemo、useRef的鈎子

因為useMemo不能保證一定不會被重新計算

useRef如果針對復雜對象,每次渲染都創建一次會很耗性能

import { useCreation } from 'ahooks';

const foo = useCreation(() => {number: Math.random()}, []);

 

22)事件訂閱

import { useEventEmitter } from 'ahooks';

// 事件隊列
const focus$ = useEventEmitter<number>();

// 發送
focus$.emit(123);

// 訂閱
focus$.useSubscription(value => {
  console.log(value);
});

 

23)鎖定異步函數

在異步函數執行完前,再次觸發會被忽略

import { useLockFn } from 'ahooks';

const submit = useLockFn(async () => {
  await requestSome();
});

<button onClick={submit}>Submit</button>

 

24)響應式修改state

import { useReactive } from 'ahooks';
const state = useReactive({
  count: 0,
  inputVal: '',
  obj: {
    value: '',
  },
});

<p> state.count:{state.count}</p>
<button onClick={() => state.count++}>
  state.count++
</button>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM