reactjs - 我可以在 useEffect 中调用单独的函数吗？

Question

我可以在 useEffect 中调用另一个单独的函数吗？

我正在 useEffect 中调用另一个函数，但保存文件后，它会自动将该函数添加到 useEffect 的数组参数中。

请参阅下面的代码以正确理解。

保存文件之前:

useEffect(() => {
  getData()
  console.log("useEffect ran...");
}, [query]);

function getData() {
  fetch(`https://jsonplaceholder.typicode.com/${query}`)
  .then(response => response.json())
  .then(json => setData(json));
}

保存文件后:

useEffect(() => {
  getData();
  console.log("useEffect ran...");
}, [getData, query]);

function getData() {
  fetch(`https://jsonplaceholder.typicode.com/${query}`)
    .then(response => response.json())
    .then(json => setData(json));
}

它一次又一次地运行。

Answer 1

TL;博士使用useCallback()

<小时/>

首先，使用函数作为依赖项是非常危险的。如果该函数导致状态更改，则后续重新渲染将再次调用该函数(通过 useEffect)...并且无限循环开始。

正如许多人建议的那样，您可以做的一件事是在 useEffect() 方法本身中创建函数。

 useEffect(() => {
    function getData() {
      fetch(`https://jsonplaceholder.typicode.com/${query}`)
        .then(response => response.json())
        .then(json => setData(json));
      }
    }

    getData();
    console.log("useEffect ran...");
  }, [query]);
}

或者简单地

 useEffect(() => {
    (() => {
       fetch(`https://jsonplaceholder.typicode.com/${query}`)
      .then(response => response.json())
      .then(json => setData(json)
     )();
  }, [query]);
}

话虽如此，有时您仍希望在 useEffect 之外声明函数以实现代码重用。这次您需要确保它不会在每次渲染期间重新创建。为此，您可以

1. 在组件外部声明函数——这迫使您将所有变量作为参数传递......这很痛苦

2. 将其包裹在 useMemo() 内或useCallback()

这是一个例子

    const getData = useCallback(()=>{...}, []);