关于 useAxios 的 useEffect 传入的依赖，是否可以不写？

Question

• 先贴代码，我在 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 算是初学，问题有点多，请老师见谅，不过一路听老师讲下来，还是很有收获，效率高太多了。感谢老师！

Answer 1

双越 2021-06-06 22:12:43

你在 useEffect 的第二个参数不传 url ，也能获取正确的值。但正如 useEffect 的基本使用所讲的，第二个参数是收集依赖项，当依赖项变了，会重新出发 useEffect 执行。

而你的代码中，useAxios('xxxx') 全部都是传入的静态的 url 字符串，不存在“当依赖项变了，会重新出发 useEffect 执行”这种场景，所以你看不到问题。

PS：我最近感觉回复了你很多很多的问题，感觉你是一个有独立思考能力的同学，总是想一些“为何不按套路出牌也对”这样的问题。我们鼓励独立思考，鼓励怀疑精神，但这有前提：你把基础的都掌握到熟练。然后再去质疑，再去深挖。然而当你是初学者时，不要太多这种想法，初学要让自己变傻一点，先按照人家的套路把基础掌握好，应用熟练再说。

所以，遇到问题要去按照既有的规则去考虑，到底是自己哪里出错了？而不是去想：为何我这样做也对，难道是 React vue 设计的有问题吗？不要这样想。

另外，不要遇到问题就直接提问，这样会严重阻碍你的自我排查、解决问题的能力，会让你形成依赖。先自己想一想，憋两天，是在搞不定再提问。这样你会更快的掌握自主解决问题的能力，这对于工作非常非常重要。

我作为过来人，感觉这是最快的学习方法，否则很容易走弯路。所以多说两句，希望能给你带来一些帮助。

• 提问者 起点丶 #1

  哈哈  我当然不敢去怀疑框架有问题，就是自己想了也试了还是没弄明白，总想搞明白，不然浑身不舒服，比如这里我就是没想明白  config 是 axios 调用后影响的，老师一说瞬间明白了，可能这段时间比较闲连着每天都在听课学习，有时候一下午坐那里反复想反复试，就感觉越琢磨就越蒙，确实需要换换脑子再回来可能就一下子就看到一道光，下次再遇到琢磨不透的我就先做好记录，过段时间在回头看，也许就有不一样的思路， 感谢老师的提点，我会继续加油