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教程