useEffect实现数据请求刷新的几种方法

请求数据入参变化的情况下重新请求数据的情景下useEffect的几种写法：

1.函数在useEffect里面：

const query = ''
  useEffect(() => {
    function fetchData () {
      return 'https://hn.algolia.com/api/v1/search?query=' + query
    }
    fetchData()
  }, [query])

2.函数放在函数式组件外面：

const planCode = ''
function fetchData (planCode) {
    return 'https://hn.algolia.com/api/v1/search?query=' + planCode
  }

useEffect(() => {
    fetchData()
  }, [planCode])

当函数不依赖函数式组件里面的变量时，就可以将它抽出函数组件之外，这样就不用将此函数放在依赖数组里。

为什么将函数提取出来，必须要放在依赖数组里？

3.函数放在函数式组件外面、放在useEffect外面(useRef的写法)

function getGoodsPoolInfo () {
    apis.getGoodsPoolInfo(conditions).then(res => {
      ...
  }

  const GoodsPoolRef = useRef(null)

  GoodsPoolRef.current = getGoodsPoolInfo

  useEffect(
    () => {
      GoodsPoolRef.current()
    }, [conditions]
  )

用ref跳过数据抓取：
将GoodsPoolRef指向一个对象，这个对象自始至终都不会变，但是该对象的current属性是变化的，所以useEffect不会要求将其写在依赖数组里面。完美的解决了问题。

4.函数放在函数式组件外面、放在useEffect外面(useCallback的写法)

const callback = useCallback(
    () => {
      apis.getGoodsPoolInfo(conditions).then(res => {
        ...
    },
    [conditions]
  )

  useEffect(
    () => {
      callback()
    }, [callback]
  )

将要放在useeffect外面的函数放在useCallback中，useCallback返回的函数可以当作普通变量作为useEffect的依赖，这样一来，函数不会随着render的变化而变化，而是随着conditions的变化而变化，conditions发生变化后，才会返回一个新的函数引用，触发 useEffect 的依赖变化，并激活其重新执行。