javascript - 当我通过时，React useCallback 会做什么。第一个参数中的对象

Question

我正在修复将 React 与 useEffect 和 useCallback 一起使用时的无限循环。

const fetchApi =useCallback(()=>{
    setIsLoading(true)
      fetchDataFunction({
        resolve(res) {
          setFetchData(fromJS(res))
          setIsLoading(false)
        }
      })
},[param])
useEffect(()=>{
    fetchApi()
},[fetchApi])

它导致了无限循环。但是，如果我更改代码如下所示

const fetchApi = useCallback({
    fetchApiFunc() {
      setIsLoading(true)
      fetchDataFunction({
        resolve(res) {
          setFetchData(fromJS(res))
          setIsLoading(false)
        }
      })
    }
  },[params])
  const { fetchApiFunc } = fetchApi
  useEffect(() => {
    fetchApiFunc()
  }, [fetchApiFunc])

问题已解决。但我仍然不明白当 useCallback 中第一个参数中的对象时它会做什么。

谢谢。

Answer 1

如果您开始使用 React-Hooks，并且您的组件在某个时候可能需要生命周期方法。并且，这就是您开始使用 useEffect() (又名 Effect Hook)的时候。然后，boom!!，您遇到了无限循环行为，并且您不知道为什么会这样。如果发生这种情况，本文将向您解释原因以及如何预防。

问题出在哪里？ “useEffect()”将在初始渲染后运行，然后调用“fetchApiFunc()”。 在“fetchApiFunc()”内部，它会在线更新状态“name”，然后触发组件再次重​​新渲染。 结果，“useEffect()”将再次运行并更新状态。接下来，整个过程再次重复，你就陷入了无限循环。

“如果某些值在重新渲染之间没有改变，你可以告诉 React 跳过应用效果。为此，请将数组作为可选的第二个参数传递给 useEffect”，来自官方:https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects