什么是自定义 Hook

自定义 Hook

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

演示 useAxios 例子

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

import { useState, useEffect } from 'react';
import axios from 'axios';

// axios 返送网络请求
function useAxios(url) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState();
  const [error, setError] = useState();

  useEffect(() => {
    // 利用 axios 发送网络请求
    setLoading(true);
    axios
      .get(url) // 发送一个 get 请求
      .then((res) => setData(res))
      .catch((err) => setError(err))
      .finally(() => setLoading(false));
  }, [url]);

  return [loading, data, error];
}

export default useAxios;

测试代码

import React from 'react';
import useAxios from '../customHooks/useAxios';

function CustomHooksMemo() {
  const url = 'http://localhost:3000/';

  // 数组解构
  const [loading, data, error] = useAxios(url);

  if (loading) return <div>loading...</div>;

  return error ? (
    <div>{JSON.stringify(error)}</div>
  ) : (
    <div>{JSON.stringify(data)}</div>
  );
}

export default CustomHooksMemo;

什么是自定义 Hook ​

演示 useAxios 例子 ​

第三方 Hooks ​

什么是自定义 Hook

演示 useAxios 例子

第三方 Hooks