Umi Hooks 實用代碼片斷整理

時間  2020-06-15
標籤 umi hooks 實用 代碼 片斷 整理 简体版
原文   原文鏈接

Umi Hooks 的代碼片斷整理，這篇是整理了Umi Hooks中的一部分方法，爲了方便本身快速查閱和使用。此文中的方法，一部分是本身比較經常使用的，一部分是我我的認爲比較實用，關於剩下沒有加入的方法，多是我本人尚未發現它的優勢，你們能夠移步到官網查閱哦！(下面的方法中，部分代碼沒有在項目中用過的方法，是直接copy的官網，關於本身用過的會有添加註釋，若是沒有，你們以官網的解釋爲主哦！)react

若是看到這篇文的你，剛好也是也在用react 的umi庫的小夥伴，我是大力推薦使用umi Hooks，真香！地址奉上bash

1、Async 之 useRequest 異步數據請求

1.自動請求

const { data } = useRequest(
    async () => {
      const response = await getList();
      return response;
    }
  );

複製代碼

2.手動請求：manual、run

const { data: list, run: listRequest } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      manual: true,
    },
  );

  useEffect(() => {
    if('某些條件'){
    listRequest();
    }
  }, []);

複製代碼

3. 手動暫停請求：cancel

const { data, run, cancel } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      manual: true,
    },
  );

<Button.Group>
    <Button onClick={run}>開始請求</Button>
    <Button onClick={cancel}>中止請求</Button>
</Button.Group>
複製代碼

4. 手動刷新：refresh

使用上一次的params，從新執行 serviceantd

const { data, run,cancel,refresh } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      manual: true,
    },
  );

<Button.Group>
    <Button onClick={run}>開始請求</Button>
    <Button onClick={cancel}>中止請求</Button>
    <Button onClick={refresh}>刷新</Button>
</Button.Group>
複製代碼

5.請求成功後執行的某些操做：onSuccess

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      onSuccess: res => {
        // 這裏的res是拿到的接口返回的全部數據
        message.success('請求成功')
      },
    },
  );

複製代碼

6.請求失敗後執行的某些操做：onError

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      onError: (error) => {
        // 這裏的error是拿到的接口返回的錯誤信息
        message.success('請求失敗')
      },
    },
  );

複製代碼

7. 請求過程當中的loading

const { data: authList,loading } = useRequest(
    async () => {
      const response = await getAuthList();
      return response;
    }
  );

複製代碼

8. 當請求未返回時，默認的data數據

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      initialData:[],
    },
  );

複製代碼

9. 請求參數變化觸發接口請求：refreshDeps

refreshDeps參數變化，會觸發service,從新執行請求，只適用於簡單狀況，當須要通過一些判斷再觸發請求時，建議仍是放在useEffect中dom

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      refreshDeps:[state1,state2],
    },
  );

複製代碼

注意：默認會自動請求一次，當依賴多個參數時，並不會合併參數的變化發起請求異步

10. 格式化返回的結果：formatResult

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      formatResult: (res) => {
        // 這裏的res是拿到的接口返回的數據
        const list = [];
        res.forEach(item => {
          list.push(item.id);
        });
        return list;
      },
    },
  );

複製代碼

11.直接修改接口返回的data數據：mutate

mutate：可能只截取一部分的data,或者根據接口返回的數據，自定義返回內容。 formatResult：原則上是用來作格式化，對數據進行從新整理async

const { data,mutate } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      onSuccess: res => {
        // 這裏的res是拿到的接口返回的全部數據
        message.success('請求成功')
        mutate([{ id: 111, name: '測試' }]);
      },
    },
  );

複製代碼

12.自動執行 run 的時候，默認帶上的參數：defaultParams

只適用於初始 + 自動請求帶的參數函數

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      defaultParams: [{ id: defaultList }],
    },
  );

複製代碼

如下的寫法也能夠：測試

const { data } = useRequest(
    async () => {
      const response = await getList({ id: defaultList });
      return response;
    },
  );
複製代碼

13. 屏幕聚焦，從新發起請求，refreshOnWindowFocus

默認爲false，若是設置爲 true，在屏幕從新聚焦或從新顯示時，會從新發起請求。ui

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      refreshOnWindowFocus: true
    },
  );
複製代碼

focusTimespan: 屏幕從新聚焦，若是每次都從新發起請求，不是很好，咱們須要有一個時間間隔，在當前時間間隔內，不會從新發起請求,須要配置refreshOnWindowFocus使用，默認：5000。this

const { data } = useRequest(
    async params => {
      const response = await getList(params);
      return response;
    },
    {
      refreshOnWindowFocus: true,
      focusTimespan:10000,
    },
  );

複製代碼

14. 接口防抖：debounceInterval

適用於屢次手動頻繁請求run，設置的防抖攔截，最後一次請求發起後的n秒後，纔會發起真正的接口請求

const { data, run,cancel } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      manual: true,
      debounceInterval: 500,
    },
  );

<Button.Group>
    <Button onClick={run}>發起請求</Button>
</Button.Group>

複製代碼

15. 節流：throttleInterval

適用於屢次手動頻繁請求run，設置的節流攔截，必定時間內只觸發一次接口請求

const { data, run,cancel } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      manual: true,
      throttleInterval: 500,
    },
  );

<Button.Group>
    <Button onClick={run}>發起請求</Button>
</Button.Group>
複製代碼

16. 輪詢請求：pollingInterval

設置後會進入輪詢模式，定時觸發函數執行

const { data, run,cancel } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      pollingInterval: 500,
    },
  );

複製代碼

pollingWhenHidden:屏幕隱藏時是否會繼續輪詢，默認爲 true，當屏幕不可見時，再發起輪詢任務就很浪費，能夠設置，當屏幕不可見，暫停定時任務

const { data, run,cancel } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      pollingInterval: 500,
      pollingWhenHidden: false
    },
  );
複製代碼

2、防抖&&節流

1. useDebounce：用來處理防抖值的 Hook

用來處理防抖值的Hook

import { Input } from 'antd';
import React, { useState } from 'react';
import { useDebounce } from '@umijs/hooks';
export default () => {
  const [value, setValue] = useState();
  const debouncedValue = useDebounce(value, 500);
  return (
    <div>
      <Input
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="Typed value"
        style={{ width: 280 }}
      />
      <p style={{ marginTop: 16 }}>DebouncedValue: {debouncedValue}</p>
    </div>
  );
};

複製代碼

2. useDebounceFn：用來處理防抖函數的 Hook

用來處理防抖函數的 Hook

const { run: handleSubmit } = useDebounceFn(() => {
    // 處理handleSubmit 函數的hooks,能夠在這裏處理一些判斷，發起請求。當handleSubmit必定時間內被屢次調用，但只在最後一次點擊後的1000毫秒，會進入到函數內
  
  }, 1000);

複製代碼

3. useThrottle：用來處理值節流的Hook

用來處理值節流的Hook

import { Input } from 'antd';
import React, { useState } from 'react';
import { useThrottle } from '@umijs/hooks';
export default () => {
  const [value, setValue] = useState();
  const throttledValue = useThrottle(value, 500);
  return (
    <div>
      <Input
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="Typed value"
        style={{ width: 280 }}
      />
      <p style={{ marginTop: 16 }}>throttledValue: {throttledValue}</p>
    </div>
  );
};

複製代碼

4. useThrottleFn：用來處理函數節流的Hook

用來處理函數節流的Hook

const { run: handleSubmit } = useDebounceFn(() => {
    // 處理handleSubmit 函數的hooks,能夠在這裏處理一些判斷，發起請求。當handleSubmit必定時間內被屢次調用，1000秒內只會進入到函數內1次
  
  }, 1000);

複製代碼

3、LifeCycle

1. useMount：只在組件 mount 時執行的 hook

在組件首次渲染時，執行方法。

useMount(() => {
    console.log('mount');
  });

複製代碼

等同於初次加載的useEffect沒有依賴的時候:

useEffect(() => {
    console.log('mount');
  }, []);
複製代碼

2. useUnmount：只在組件unmount時執行的hook

在組件卸載時，執行方法。

useUnmount(() => {
    // 能夠在卸載的時候，處理取消計時器等一些操做
    console.log('卸載');
  });
複製代碼

3. useUpdateEffect：一個只在依賴更新時執行的 useEffect hook。

以前用useEffect的時候，一直有一個困惑，就是useEffect不管是否有依賴項，首次渲染都會進入到函數內，爲了不這樣尷尬的狀況，每次都須要用if 判斷來攔截。useUpdateEffect就解決了這個痛點，它在使用上同useEffect徹底同樣，只是它忽略了首次渲染，且只在依賴項變化時進行運行。

useEffect：

useEffect(() => {
  // 首次會運行
    console.log('tabkey', tabKey);
  }, [tabKey]);
複製代碼

useUpdateEffect：

useUpdateEffect(() => {
  // 首次不運行，只有在依賴更新的時候運行,當第二個參數爲空，也不會運行
    console.log('tabkey', tabKey);
  }, [tabKey]);
複製代碼

總結：若是你須要首次運行，監聽到相應參數也運行，那就用useEffect,若是你想要的結果是首次不運行，只有在監聽到參數變化後再運行，那就用useUpdateEffect。

4、Dom

1. useFullscreen ：一個用於處理 dom 全屏的 Hook

可處理是否全屏的功能

  1. 使用ref 設置須要全屏的元素
import React from 'react';
import { Button } from 'antd';
import {useFullscreen} from '@umijs/hooks';
export default () => {
  const { ref, isFullscreen, setFull, exitFull, toggleFull } = useFullscreen<HTMLDivElement>();
  return (
    <div ref={ref} style={{ background: 'white' }}>
      <div style={{ marginBottom: 16 }}>{isFullscreen ? 'Fullscreen' : 'Not fullscreen'}</div>
      <Button.Group>
        <Button onClick={setFull}>setFull</Button>
        <Button onClick={exitFull}>exitFull</Button>
        <Button onClick={toggleFull}>toggle</Button>
      </Button.Group>
    </div>
  );
};

複製代碼
  1. 傳入 function 來監放任意的 dom 節點

可用於圖片，指定元素的全屏

import React from 'react';
import { Button } from 'antd';
import {useFullscreen} from '@umijs/hooks';
import img from './react-hooks.jpg';
export default () => {
  const { setFull } = useFullscreen<HTMLElement>({
    dom: () => document.getElementById('fullscreen-img'),
  });
  return (
    <div style={{ background: 'white' }}>
      <div style={{ marginBottom: 16 }}>
        <img id="fullscreen-img" src={img} style={{ width: 320 }} alt="" />
      </div>
      <Button onClick={setFull}>setFull</Button>
    </div>
  );
};
複製代碼

2.useHover : 一個用於追蹤dom 元素是否有鼠標懸停的Hook

可使用ref來設置須要監聽的元素，並獲取到狀態，進行一些操做

import React from 'react';
import { useHover } from '@umijs/hooks';
export default () => {
  const [isHovering, hoverRef] = useHover<HTMLDivElement>();
  return <div ref={hoverRef}>{isHovering ? 'hover' : 'leaveHover'}</div>;
};

複製代碼

一樣也支持拿到懸停的回調，這樣你能夠根據不一樣回調來執行不一樣操做

import React from 'react';
import { useHover } from '@umijs/hooks';
export default () => {
  const [isHovering] = useHover({
    dom: () => document.getElementById('hover-div'),
    onEnter: () => {
      console.log('onEnter');
    },
    onLeave: () => {
      console.log('onLeave');
    },
  });
  return <div id="hover-div">{isHovering ? 'hover' : 'leaveHover'}</div>;
};

複製代碼

3.useMouse：一個跟蹤鼠標位置的Hook

能夠實時拿到鼠標的位置

import React, { useMemo } from 'react';
import {useMouse} from '@umijs/hooks';
export default () => {
  const mouse = useMouse();
  return <div>Mouse Pos: {JSON.stringify(mouse)}</div>;
};
複製代碼

4. useInViewport：一個用於判斷dom元素是否在可視範圍以內的 Hook

適用於有些業務場景，若是一個dom元素不在但是範圍以內，觸發其餘dom的變化，使用 ref 監聽節點在視圖變化或者滾動時是否在可視範圍以內

import React from 'react';
import {useInViewport} from '@umijs/hooks';
export default () => {
  const [inViewPort, ref] = useInViewport<HTMLDivElement>();
  // 一樣可使用id來設置綁定元素
  // const [inViewPort] = useInViewport(() => document.querySelector('#demo2'));
  return (
    <div>
      <div ref={ref} id="dome2">observer dom</div>
      <div style={{ marginTop: 70, color: inViewPort ? '#87d068' : '#f50' }}>
        {inViewPort ? 'visible' : 'hidden'}
      </div>
    </div>
  );
};

複製代碼

5. useSize：一個用於監聽dom節點尺寸變化的hook

能夠實時拿到監聽元素的寬、高

import React from 'react';
import {useSize} from '@umijs/hooks';
export default () => {
  const [state] = useSize(document.querySelector('body'));
  // 一樣能夠用id來綁定：
  //  const [state] = useSize(() => document.querySelector('#demo2'));
  return (
    <div id="demo2">
      this demo is listening to body size change, try to resize the window instead <br />
      dimensions -- width: {state.width} px, height: {state.height} px
    </div>
  );
};

複製代碼

6. useTextSelection：實時獲取用戶當前選取的文本內容及位置

能夠拿到選取的文本值、上下左右座標、高度、寬度

import React from 'react';
import { useTextSelection } from '@umijs/hooks';
export default () => {
  const [selection, ref] = useTextSelection();
  //  經過id 來監聽
  //  const [{ text  }] = useTextSelection(() => document.querySelector('#target-dom'));
  return (
    <div>
      <div ref={ref}>
        <p id="target-dom">
          Please swipe your mouse to select any text on this paragraph.
        </p>
      </div>
      <p>Result：{JSON.stringify(selection)}</p>
    </div>
  );
};

複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程