React Adaptive Hooks
made with React

React Adaptive Hooks是一套React Hooks，提供最适合用户设备和网络限制的体验，用于基于用户网络、数据保存首选项、设备内存和逻辑CPU内核的自适应加载。

React Adaptive Hooks可用于添加用于自适应资源加载、数据获取、代码-分裂和能力切换。

安装

Npm

npm i react-adaptive-hooks

Yarn

yarn add react-adaptive-hooks

使用

import { useNetworkStatus } from 'react-adaptive-hooks/network';
import { useSaveData } from 'react-adaptive-hooks/save-data';
import { useHardwareConcurrency } from 'react-adaptive-hooks/hardware-concurrency';
import { useMemoryStatus } from 'react-adaptive-hooks/memory';
import { useMediaCapabilitiesDecodingInfo } from 'react-adaptive-hooks/media-capabilities';

引入后，你就可以在组件中使用它们了，例如useNetworkStatus ：

import React from 'react';

import { useNetworkStatus } from 'react-adaptive-hooks/network';

const MyComponent = () => {
  const { effectiveConnectionType } = useNetworkStatus();

  let media;
  switch(effectiveConnectionType) {
    case 'slow-2g':
      media = <img src='...' alt='low resolution' />;
      break;
    case '2g':
      media = <img src='...' alt='medium resolution' />;
      break;
    case '3g':
      media = <img src='...' alt='high resolution' />;
      break;
    case '4g':
      media = <video muted controls>...</video>;
      break;
    default:
      media = <video muted controls>...</video>;
      break;
  }

  return <div>{media}</div>;
};