什么是自定义 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​

演示 useAxios 例子

第三方 Hooks