• 封装通用的功能
• 开发和使用第三方 Hooks
• 自定义 Hook 带来了无线的扩展性，解耦代码

useAxios

import { useEffect, useState } from 'react';
import axios from 'axios';
// 封装 axios 发送网络请求的自定义 Hook
function useAxios(url) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState();
  const [err, setErr] = useState();
  useEffect(() => {
    // 利用 axios 发送网络请求
    setLoading(true);
    axios.get(url)
      .then(setData)
      .catch(setErr)
      .finally(() => setLoading(false));
  }, [url]);
  return [loading, data, err];
}
export default useAxios;

自定义 hook

• 本质是一个函数，以 use 开头（重要）
• 内部正常使用 useEffect useState 等获取其他 hooks
• 自定义返回结果，格式不限

Hooks 使用规范

• 命名规范 useXxxx
• 只能用于 React 函数组件和自定义 Hook 中，其他地方不可以
• 只能用于顶层代码，不能在循环、判断中使用 Hooks
• eslint 插件 eslint-plugin-react-hooks 可以帮到你