Hooks 是 React 16.8 引入的一种新特性，它可以让我们在函数组件中使用状态和其他 React 特性。Hooks 提供了一系列的 API，例如 useState、useEffect 等，用于管理组件的状态和生命周期。具体可参考react hooks。
ahooks 是阿里巴巴开源的一个 React Hooks 库，它是对 React Hooks 的扩展和封装，提供了更多的实用的 Hooks。ahooks 中包含了一些常用的 Hooks，例如 useRequest、useLocalStorage 等，它们可以帮助我们更方便地处理请求、存储和其他功能。
因此，Hooks 是 React 自带的特性，而 ahooks 则是第三方库，它们可以一起使用，但是 ahooks 提供了更多的功能和便利性。
ahooks 提供了丰富的功能，下面列举一些常见的功能：
- 异步请求处理（useRequest）：简化异步请求的处理，自动处理 loading 状态、错误处理等。
- 本地存储（useLocalStorage、useSessionStorage）：方便地在组件中使用本地存储，自动处理数据的读取和更新。
- 定时器（useInterval、useTimeout、useRAF）：简化定时器的使用，可以方便地执行周期性的操作。
- 防抖和节流（useDebounce、useThrottle）：防抖可以用于输入框的实时搜索等场景，节流可以用于限制某些操作的执行频率。
- 表单校验（useFormValidation）：提供了一些常用的表单校验规则和验证函数，方便进行表单验证。
- 页面可见状态（useDocumentVisibility）：监听页面是否可见状态的变化，可以用于处理页面切换时的逻辑。
- 键盘事件（useKeyPress、useHotkeys）：方便地监听键盘事件，可以用于实现快捷键等功能。
- 滚动事件（useScroll、useScrolling）：监听页面滚动事件，可以用于实现滚动加载等功能。
- 主题切换（useLocalStorageState、createGlobalState）：方便地实现页面主题的切换和共享状态的管理。
- 地理位置（useGeolocation）：获取用户当前的地理位置信息。
- 页面鼠标位置（useMouse）：获取鼠标当前在页面中的位置信息。
- 视口大小（useSize）：监听页面视口的大小变化。
- 拖拽（useDrag、useDrop）：实现元素的拖拽功能。
列举一些常用 ahooks 的的示例代码：
- useRequest: 处理异步请求
import { useRequest } from 'ahooks';const fetchData = () => {return new Promise((resolve) => {setTimeout(() => {resolve('数据请求成功！');}, 2000);});
};const MyComponent = () => {const { data, loading, error } = useRequest(fetchData);if (loading) {return <div>Loading...</div>;}if (error) {return <div>Error: {error}</div>;}return <div>Data: {data}</div>;
};
- useLocalStorage: 处理本地存储
import { useLocalStorage } from 'ahooks';const MyComponent = () => {const [value, setValue] = useLocalStorage('myKey', 'initialValue');return (<div><inputtype="text"value={value}onChange={(e) => setValue(e.target.value)}/><p>Value: {value}</p></div>);
};
- useInterval: 处理定时器
import { useInterval } from 'ahooks';const MyComponent = () => {const [count, setCount] = useState(0);useInterval(() => {setCount(count + 1);}, 1000);return <div>Count: {count}</div>;
};
- useDebounce: 处理防抖
import { useDebounce } from 'ahooks';const MyComponent = () => {const [value, setValue] = useState('');const debouncedValue = useDebounce(value, 500);return (<div><inputtype="text"value={value}onChange={(e) => setValue(e.target.value)}/><p>Debounced Value: {debouncedValue}</p></div>);
};
这些只是 ahooks 提供的一小部分功能，还有很多其他的 Hooks 可以在 ahooks 中使用。
