• 先贴代码，我在 useEffect 不传 url 依赖，貌似也不会有影响？

useAxios.js

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

// axios hook
function useAxios(url, config = {}) {
  // 每次 setState 即 re-render 都会重新执行函数，
  console.log('useAxios...')
  const [loading, setLoading] = useState(false)
  const [data, setDate] = useState()
  const [error, setError] = useState()
  useEffect(() => {
    console.log('useAxios...useEffect')
    setLoading(true)
    axios(url)
      .then(res => setDate(res))
      .catch(err => setError(err))
      .finally(() => setLoading(false))
    return () => {}
  }, [])   //这里依赖可以不传吗？我试了好像没啥影响

  return {
    loading,
    data,
    error,
  }
}

export default useAxios

使用 useAxios

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

function CustomHook() {
  const { loading, data, error } = useAxios(
    'https://jsonplaceholder.typicode.com/users/1'
  )
  const {
    loading: loading2,
    data: data2,
    error: error2,
  } = useAxios('https://jsonplaceholder.typicode.com/users/2')
  const {
    loading: loading3,
    data: data3,
    error: error3,
  } = useAxios('https://jsonplaceholder.typicode.com/users/asdadasd')
  return (
    <div>
      <div>
        {loading && <p>Loading</p>}
        {data && <div>{JSON.stringify(data)}</div>}
        {error && <p>出错啦1！！</p>}
      </div>
      <hr />
      <div>
        {loading2 && <p>loading2</p>}
        {data2 && <div>{JSON.stringify(data2)}</div>}
        {error2 && <p>出错啦2！！</p>}
      </div>
      <hr />
      <div>
        {loading3 && <p>loading3</p>}
        {data3 && <div>{JSON.stringify(data3)}</div>}
        {error3 && <p>出错啦3！！</p>}
      </div>
    </div>
  )
}

export default CustomHook

输出结果

• 有点搞不懂为什么要传 url 依赖? 这里的依赖意思是在 url 改变时候才会触发对么，而在代码里并没有对 url 做修改 ， url 只是参数，每次请求调用这个 useAxios 都是独立的，为什么要依赖 url？
• 如果可以不传，那 config 也可以不传，是不是就不存在死循环的问题了？
• 之前一直用 vue ，react 算是初学，问题有点多，请老师见谅，不过一路听老师讲下来，还是很有收获，效率高太多了。感谢老师！