Umi hooks => Фрагменты кода утилиты aHooks

aHooksФрагменты кода организованы, это организованоaHooksНекоторые из методов в нем, чтобы облегчить вам быстрый доступ и использование. Некоторые из методов в этой статье я обычно использую, а некоторые потому, что я лично считаю их более практичными.Что касается остальных методов, которые не были добавлены, возможно, я еще не обнаружил их преимущества.Вы можете перейти на официальный сайт, чтобы проверить это! (В следующих методах часть кода не использовалась в проекте, она напрямуюcopyНа официальном сайте будут комментарии к тем, которые вы использовали. )

!!!!! Оригинальные проект UMI крючков был интегрирован и повторно обновлен, теперь используяUmi hooksс новыми альтернативамиaHooks, первоначально использовалсяUmi HooksОдноклассники, которые не знакомы с ним, могут следить за обновлением.В основном имя импортируемого пакета было изменено, а другие были немного изменены.Я также внес некоторые изменения в следующие пункты.Вы можете обратить внимание, когда будете использовать его!

// umi hooks 的引入方式
import { useDebounce } from '@umijs/hooks';

// ahooks 的引入方式
import { useRequest } from 'ahooks';

Если вы читаете эту статью, вы также используете ееreactизumiБиблиотеки, я настоятельно рекомендую использоватьumi Hooks, Вкусный!

Umi Hooks

aHooks

один,`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. Запрос зависимости:`ready`

готов к получению логического значения, значение готовности только становится истинным, оно инициирует запрос, запрос, зависящий от реализации

 const { data, run, cancel } = useRequest(
    async () => {
      const response = await getList();
      return response;
    },
    {
      ready: Boolean(isOk),
    },
  );

4. Вручную приостановите запрос:`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>

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середина

 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: В принципе, используется для форматирования и перестановки данных

  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, запрос будет повторно инициализирован при изменении фокуса или повторном отображении экрана.

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

focusTimespan: Экран перефокусирован.Если запрос каждый раз переинициируется, это не очень хорошо.Нам нужен интервал времени.В течении текущего интервала времени запрос не будет повторно инициирован.Надо настроить .refreshOnWindowFocusиспользовать по умолчанию:5000.

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`

Он подходит для нескольких ручных и частых запросов на запуск, установленного перехвата дросселирования, и только один запрос интерфейса срабатывает в течение определенного периода времени.

 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`: Хук для обработки значения debounce

Используется для обработки значения защиты от сотрясенийHook

import { Input } from 'antd';
import React, { useState } from 'react';
import { useDebounce } from 'ahooks';
export default () => {
  const [value, setValue] = useState();
  const debouncedValue = useDebounce(value, { wait: 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

  const { run: handleSubmit } = useDebounceFn(() => {
    // 处理handleSubmit 函数的hooks,可以在这里处理一些判断，发起请求。当handleSubmit一定时间内被多次调用，但只在最后一次点击后的1000毫秒，会进入到函数内
  
  },  {
        wait: 1000,
    },);

3. `useThrottle`: Крючок используется для обработки значения значения

используется для обработки регулирования значенийHook

import { Input } from 'antd';
import React, { useState } from 'react';
import { useThrottle } from 'ahooks';
export default () => {
  const [value, setValue] = useState();
  const throttledValue = useThrottle(value, {wait: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

  const { run: handleSubmit } = useDebounceFn(() => {
    // 处理handleSubmit 函数的hooks,可以在这里处理一些判断，发起请求。当handleSubmit一定时间内被多次调用，1000秒内只会进入到函数内1次
  
  }, {
        wait:1000
      
  });

3. Жизненный цикл

1. `useMount`: хук, который выполняется только при монтировании компонента

Метод выполняется при первом рендеринге компонента.

  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(() => {
  // 首次会运行
    console.log('tabkey', tabKey);
  }, [tabKey]);

использоватьобновлениеЭффект:

  useUpdateEffect(() => {
  // 首次不运行，只有在依赖更新的时候运行,当第二个参数为空，也不会运行
    console.log('tabkey', tabKey);
  }, [tabKey]);

Резюме: если вам нужно запустить в первый раз и контролировать соответствующие параметры для запуска, используйтеuseEffect, если вы хотите, чтобы результат не запускался в первый раз, а запускался только после прослушивания изменений параметров, используйтеuseUpdateEffect.

4. Дом

1. `useFullscreen`: Хук для работы с полноэкранным режимом dom.

Может обрабатывать функцию полноэкранного режима или нет

использоватьrefНабор элементов, которые нуждаются в полноэкранном режиме

import React from 'react';
import { Button } from 'antd';
import {useFullscreen} from 'ahooks';
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>
  );
};

входящийfunctionдля прослушивания любого узла dom

Может использоваться для изображений, полноэкранных указанных элементов

import React from 'react';
import { Button } from 'antd';
import {useFullscreen} from 'ahooks';
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 'ahooks';
export default () => {
  const [isHovering, hoverRef] = useHover<HTMLDivElement>();
  return <div ref={hoverRef}>{isHovering ? 'hover' : 'leaveHover'}</div>;
};

Он также поддерживает получение обратного вызова при наведении, поэтому вы можете выполнять различные операции на основе разных обратных вызовов.

import React from 'react';
import { useHover } from 'ahooks';
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`: хук, который отслеживает положение мыши

Получить положение мыши в режиме реального времени

import React, { useMemo } from 'react';
import {useMouse} from 'ahooks';
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 'ahooks';
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 'ahooks';
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 'ahooks';
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>
  );
};

5. Другие крючки

1. `useBrowserContextCommunication`: та же страница отличается`tab`Синхронизация открытого состояния

использоватьBroadcast Channel APIдля разных контекстов браузера (вкладки,iframe, windows) обеспечивает простое решение.

адрес официального сайта useBrowserContextCommunication

нпм скачать:

cnpm install --save react-window-communication-hoo

Конкретный пример кода:


import React ,{ useState } from 'react'
import useBrowserContextCommunication from 'react-window-communication-hook';


const App = ()=>{

  // communicationState 是一个 {lastMessage, messages} 对象，用于从其它的浏览器上下文接收数据

  const [communicationState, postMessage] = useBrowserContextCommunication('channel');

  const [status, setStatus] = useState('login');

  // 切换事件

  const logout=()=> {
    setStatus('logout');
    postMessage('logout');
  }

  const isLogout = [communicationState.lastMessage, status].includes('logout');

    return (
    <div>
      <h1>状态：{isLogout ? '已退出' : '已登录'}</h1>
      <button onClick={logout}>退出</button>
    </div>
  );
}

export default App;

Далее, пожалуйста, используйте вышеуказанную страницу с двумяtabОткройте, после работы первой страницы посмотрите изменение состояния другой страницы.

2. react-use-idb: хранить данные для indexdb

параметр:

const [value, setValue] = useIdb(key, initialValue)
--- 
value：获取对应key 的value 值

setValue：给对应的key 设置value值

key: key键值

initialValue：默认存储的value值

нпм скачать:

cnpm  install --save react-use-idb

Конкретный пример кода:

import { useIdb } from 'react-use-idb';

export default () => {
  const [value, setValue] = useIdb('key', 'ccc');

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('aaa')}>aaa</button>
      <button onClick={() => setValue('bbb')}>bbb</button>
    </div>
  );
};

3. @rehooks/online-status: используется для получения текущего статуса сети.

useOnlineStatusИспользуется для получения текущего состояния сети, возвратаtrue / false

нпм скачать:

cnpm install --save @rehooks/online-status

Конкретный пример кода:

import { React } from 'react'
import useOnlineStatus from '@rehooks/online-status';

const App =()=>{
  const onlineStatus = useOnlineStatus();
  return (
    <div>
       <h1>当前网络状态 {onlineStatus ? '在线' : '离线'}</h1>
    </div>
  );
}
export default App;

4. Отдача: используется для`React`библиотека управления состоянием

Recoilпри условии оReactобработка состояния, упрощающая унификацию состояния родительских и дочерних компонентов, подобноredux

Сценарии использования (цитируя объяснение Руан Да):

某个组件的状态，需要共享
某个状态需要在其他组件可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

Однако у них есть общая предпосылка, то есть они должны быть обернуты общим корневым компонентом, и все компоненты под корневым компонентом могут совместно использовать состояние.Без лишних слов, вот код:

нпм скачать:

cnpm install recoil

адрес документа

RecoilRoot

Использование компонентовRecoilСостояние должно быть обернуто вокруг него доRecoilRootкомпоненты. Его можно разместить непосредственно вне корневого компонента коротким и плавным образом:

import React from 'react';
import { Card } from 'antd';
import { RecoilRoot } from 'recoil';
import Test from './test';
import Test2 from './test2';
import Test3 from './test3';

const App = () => {

  return (
    <RecoilRoot>

      <Test />

      <Test2 />

      <Test3 />
      
    </RecoilRoot>
  );
};

export default App;

2.atom

atomПредставляет собой небольшую часть состояния.atomМожет быть прочитан и записан в любом компоненте. чтение компонентаatomДанные будут неявно подписаны на него, и любое обновление приведет к повторному рендерингу подписанного на него компонента.

import { atom } from 'recoil';

export const atomTermId = atom({
  key: 'termId', // 键
  default: null, // 默认值
});

useRecoilState

может читатьatomопределенное состояние, возвращая кортеж, где первый элементatomзначение, второй элементsetterфункция, которую можно вызвать с помощьюatomОбновить до заданного значения.

import React from 'react';
import { Button, Card } from 'antd';
import { useRecoilState } from 'recoil';

const atomAuthId = atom({
  key: 'accountWechatId',
  default: null,
});

const Test = () => {
  const [stateAuthId, setStateAuthId] = useRecoilState(atomAuthId);

  const addCount = () => {
    const date = new Date().getMilliseconds();
    setStateAuthId(date);
  };

  return (
    <Card>
      <div style={{ marginBottom: 20 }}>Test-AuthId:{stateAuthId}</div>
      <Button type="primary" onClick={addCount}>
        改变-AuthId
      </Button>
    </Card>
  );
};

export default Test;

selector

Возвращает состояние обратной очистки с возможностью записи или только для чтения, в зависимости от параметров, переданных функции. имеютgetа такжеsetДве функции, соответствующие get и set соответственно, поддерживают асинхронный режим.

import React from 'react';
import { Button, Card } from 'antd';
import { atom, selector, useRecoilState } from 'recoil';

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

// 通过 selector 的get 和 set 的执行来处理数据
const tempCelcius = selector({
  key: 'tempCelcdius',
  
  // get:手动获取或者设置后的回显都会走这里
  get: ({ get }) => {
    return get(tempFahrenheit) + 10; // 默认value 是 32，获取时 +10,初始默认是42
  },
  
  // set:如果不设置set ,就不能使用 useRecoilState 第二个参数来设置值
  set: ({ set }, newValue) => {
    return set(tempFahrenheit, newValue * 2); // 设置时value * 2
  },
});

const Test = () => {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  const [tempC, setTempC] = useRecoilState(tempCelcius);

  const addTenCelcius = () => setTempC(tempC);
  const addTenFahrenheit = () => setTempF(tempF + 10);

  return (
    <>
      <Card>
        Temp (Celcius): {tempC}
        <br />
        <Button onClick={addTenCelcius}>Add 10 Celcius</Button>
        <br />
      </Card>
      <Card>
        Temp (Fahrenheit): {tempF}
        <br />
        <Button onClick={addTenFahrenheit}>Add 10 Fahrenheit</Button>
      </Card>
    </>
  );
};

export default Test;

useRecoilValue

Может использоваться, когда компонент намеревается прочитать состояние без записи в него, возвращая заданныйrecoilЦенность государства.

import React  from 'react'
import {atom, selector, useRecoilValue} from 'recoil';

const App = ()=>{

    //atom 状态
    const namesState = atom({
      key: 'namesState',
      default: ['', 'Ella', 'Chris', '', 'Paul'],
    });
    
    // selector 选择器处理
    const filteredNamesState = selector({
      key: 'filteredNamesState',
      get: ({get}) => get(namesState).filter((str) => str !== ''),
    });
    
    // 获取值
    const names = useRecoilValue(namesState);
    const filteredNames = useRecoilValue(filteredNamesState);

    return (
    <>
      Original names: {names.join(',')}
      <br />
      Filtered names: {filteredNames.join(',')}
    </>
  );
}

export default App;

useResetRecoilState

сброс настроекrecoilФункция, значение которой является начальным значением, принимает один параметр и возвращаетrecoilсбрасывается до значения на момент определенияdefaultстоимость

import React from 'react';
import { Button, Card } from 'antd';
import { atom, useRecoilState, useResetRecoilState } from 'recoil';

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const Test = () => {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);


  const addTenCelcius = () => setTempC(tempC);
  const addTenFahrenheit = () => setTempF(tempF + 10);

  // 重置为定义时的default值
  const resetList = useResetRecoilState(tempFahrenheit);

  return (
    <>
      <Card>
        Temp (Fahrenheit): {tempF}
        <br />
        <Button onClick={addTenFahrenheit}>Add 10 Fahrenheit</Button>
      </Card>

      <br />
      <Button onClick={resetList}>重置tempFahrenheit</Button>
    </>
  );
};

export default Test;

Ниже приведен конкретный код (сокращенная версия), используемый в общем состоянии нескольких компонентов:

Структура каталога:

mods {
    index.ts 
        可以把共用的状态放在统一的一个文件，这样方便管理，当然也可以和上面的示例一样，把recoil 值的定义放在当前页面
}
index.tsx 
        根目录，把RecoilRoot放到这里
test.tsx
        共用状态的组件1
test2.tsx
        共用状态的组件2

mods-index.ts:

import { atom } from 'recoil';

export const atomTermId = atom({
  key: 'termId',
  default: null,
});

export const atomAuthId = atom({
  key: 'accountWechatId',
  default: null,
});

корневой каталог index.tsx

import React, {  useEffect } from 'react';
import { Card,  } from 'antd';
import Test from './test';
import Test2 from './test2';
import { RecoilRoot, useRecoilState } from 'recoil';
import { atomAuthId, atomTermId } from './mods/index';

const State = () => {

  const [stateAuthId, setStateAuthId] = useRecoilState(atomAuthId);
  const [stateTermId, setStateTermId] = useRecoilState(atomTermId);

  useEffect(() => {
    setStateAuthId(1112);
    setStateTermId(1113);
 
  }, []);

  return (
    <Card>
      <Card>
        <p>index页面-- 初始值：</p>
        <p>stateAuthId:{stateAuthId}</p>
        <p>stateTermId:{stateTermId}</p>{' '}
      </Card>

      <Test />

      <Test2 />
     
    </Card>
  );
};

// 如果想在这里也能获取或设置recoil的值，那就像下面一样，把组件包一层，如果不需要，那就把RecoilRoot 提到上面包裹在最外层即可
const App = () => {
  return (
    <RecoilRoot>
      <State />
    </RecoilRoot>
  );
};
export default App;

test.tsx:

import React from 'react';
import { Button, Card } from 'antd';
import { atomAuthId } from './mods/index';
import { useRecoilState } from 'recoil';

const Test = () => {
  const [stateAuthId, setStateAuthId] = useRecoilState(atomAuthId);

  const addCount = () => {
    const date = new Date().getMilliseconds();
    setStateAuthId(date);
  };

  return (
    <Card>
      <div style={{ marginBottom: 20 }}>Test-AuthId:{stateAuthId}</div>
      <Button type="primary" onClick={addCount}>
        改变-AuthId
      </Button>
    </Card>
  );
};

export default Test;

test2.tsx:

import React from 'react';
import { Card, Button } from 'antd';
import { atomTermId } from './mods/index';
import { useRecoilState } from 'recoil';

const Test = () => {
  const [stateTermId, setStateTermId] = useRecoilState(atomTermId);

  const addCount = () => {
    const date = new Date().getMilliseconds();
    setStateTermId(date);
  };

  return (
    <Card>
      <div style={{ marginBottom: 20 }}>Test2-TermId:{stateTermId}</div>
      <Button type="primary" onClick={addCount}>
        更新-TermId
      </Button>
    </Card>
  );
};

export default Test;

Отображение страницы:

Примечание:recoilДокументация еще не очень полная.Я рекомендую вам те, которыми я пользовался в первую очередь.В дальнейшем, когда документация будет обновлена, я продолжу ее обновлять!

Далее я буду продолжать обновлять все больше и больше полезных крючков!

один,AsyncИзuseRequestАсинхронный запрос данных

1. Автоматический запрос

2. Ручной запрос:manual,run

3. Запрос зависимости:ready

4. Вручную приостановите запрос:cancel

5. Некоторые операции, выполняемые после успешного запроса:onSuccess

6. Некоторые действия, которые необходимо выполнить после сбоя запроса:onError

7. Во время запросаloading

8. Если запрос не возвращается, по умолчаниюdataданные

9. Изменение параметра запроса инициирует запрос интерфейса:refreshDeps

10. Отформатируйте возвращаемый результат:formatResult

11. Напрямую изменить возвращенный интерфейсdataданные:mutate

12. Автоматическое выполнениеrunКогда параметры по умолчанию:defaultParams

13. Экран фокусируется, повторно инициирует запрос,refreshOnWindowFocus

14. Антивибрационный интерфейс:debounceInterval

15. Дросселирование:throttleInterval

16. Запрос на опрос:pollingInterval

2. Защита от сотрясений и дросселирование

1. useDebounce: Хук для обработки значения debounce

2. useDebounceFn: Крючок, используемый для управления функцией защиты от сотрясений.

3. useThrottle: Крючок используется для обработки значения значения

4. useThrottleFn: Перехватчик для управления регулированием функций.

3. Жизненный цикл

1. useMount: хук, который выполняется только при монтировании компонента

2. useUnmount: только в компонентахunmountвыполняется, когдаhook

3. useUpdateEffect: тот, который выполняется только при обновлении зависимостейuseEffect hook.

4. Дом

1. useFullscreen: Хук для работы с полноэкранным режимом dom.

2.useHover: трекер для отслеживания того, есть ли наведение мыши на элемент domHook

3.useMouse: хук, который отслеживает положение мыши

4. useInViewport: один для оценкиdomНаходится ли элемент в пределах видимого диапазонаHook

5. useSize: один для мониторинга изменений размера узла domhook

6. useTextSelection: получить текстовое содержимое и позицию, выбранную пользователем в данный момент, в режиме реального времени.

5. Другие крючки

1. useBrowserContextCommunication: та же страница отличаетсяtabСинхронизация открытого состояния

2. react-use-idb: хранить данные для indexdb

3. @rehooks/online-status: используется для получения текущего статуса сети.

4. Отдача: используется дляReactбиблиотека управления состоянием

один,`Async`Из`useRequest`Асинхронный запрос данных

2. Ручной запрос:`manual`,`run`

3. Запрос зависимости:`ready`

4. Вручную приостановите запрос:`cancel`

5. Некоторые операции, выполняемые после успешного запроса:`onSuccess`

6. Некоторые действия, которые необходимо выполнить после сбоя запроса:`onError`

7. Во время запроса`loading`

8. Если запрос не возвращается, по умолчанию`data`данные

9. Изменение параметра запроса инициирует запрос интерфейса:`refreshDeps`

10. Отформатируйте возвращаемый результат:`formatResult`

11. Напрямую изменить возвращенный интерфейс`data`данные:`mutate`

12. Автоматическое выполнение`run`Когда параметры по умолчанию:`defaultParams`

13. Экран фокусируется, повторно инициирует запрос,`refreshOnWindowFocus`

14. Антивибрационный интерфейс:`debounceInterval`

15. Дросселирование:`throttleInterval`

16. Запрос на опрос:`pollingInterval`

1. `useDebounce`: Хук для обработки значения debounce

2. `useDebounceFn`: Крючок, используемый для управления функцией защиты от сотрясений.

3. `useThrottle`: Крючок используется для обработки значения значения

4. `useThrottleFn`: Перехватчик для управления регулированием функций.

1. `useMount`: хук, который выполняется только при монтировании компонента

2. `useUnmount`: только в компонентах`unmount`выполняется, когда`hook`

3. `useUpdateEffect`: тот, который выполняется только при обновлении зависимостей`useEffect` `hook`.

1. `useFullscreen`: Хук для работы с полноэкранным режимом dom.

2.`useHover`: трекер для отслеживания того, есть ли наведение мыши на элемент dom`Hook`

3.`useMouse`: хук, который отслеживает положение мыши

4. `useInViewport`: один для оценки`dom`Находится ли элемент в пределах видимого диапазона`Hook`

5. `useSize`: один для мониторинга изменений размера узла dom`hook`

6. `useTextSelection`: получить текстовое содержимое и позицию, выбранную пользователем в данный момент, в режиме реального времени.

1. `useBrowserContextCommunication`: та же страница отличается`tab`Синхронизация открытого состояния

4. Отдача: используется для`React`библиотека управления состоянием