最佳实践React钩子HTTP加载

Question

我最近用react启动了另一个项目，因为我有一点时间来摆弄，我使用了带有挂钩的功能组件。我没有任何问题，只有一件事我不确定我是否正确使用，下面是一个例子：

function MyComponent() {
  const [data, setData] = useState([]);
  const [dataLoaded, setDataLoaded] = useState(false);

  var getDataFromHTTP = async () { ... }

  var loadData = async () => {
    if (!dataLoaded) {
      setDataLoaded(true);
      setData(await getDataFromHTTP());
    }
  }

  loadData();

  return( ... );
}

如果我喜欢每件事的处理方式，我想使用loadData（）是肮脏的；就像在前面的例子中，我尝试使用effect来处理如下内容：

useEffect(() => {
  loadData();
}, []);

但后来我得到了一个警告，比如“loadData应该是useEffect的依赖项”。如果我省略了useEffect的第二个参数，它看起来就像是将它直接放在MyComponent中一样。所以基本上，我的问题是，在这个例子中，当安装组件时加载数据的最佳实践是什么？当然，当道具/状态发生变化时，如果需要，重新加载道具/状态的最佳实践是什么？

编辑：我对useEffect的警告是：

[Warning] ./src/list/main.js (1.chunk.js, line 25568)
Line 53:  React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Answer 1

useEffect的工作方式是依赖项数组中的某个更改响应将运行该效果

useEffect(() => {
  loadData();
}, [loadData]); // <-- dependencies array

但是，正如您所声明的那样，loadData是一个普通函数，它将在每次渲染时重新分配给一个新函数，并触发效果。最好的方法是将loadData函数包装在useCallback钩子中

const loadData = useCallback(async () => {
    if (!dataLoaded) {
      setDataLoaded(true);
      setData(await getDataFromHTTP());
    }
}, [])