如何在 React 函数组件中不使用 useEffect 钩子获取数据？

Posted 2023-02-22

【中文标题】如何在 React 函数组件中不使用 useEffect 钩子获取数据？

【英文标题】：How to fetch data without useEffect hooks in React function component?

【发布时间】：2020-09-14 22:58:54

【问题描述】：

我知道使用钩子的常规方法是使用useEffect 钩子获取数据。但是为什么我不能只在功能组件中调用 axios 而不是一个钩子，然后设置数据。

基本上，我在问这样做有什么问题：

const [users, setUsers] = useState(null);
axios.get("some api call")
  .then(res => setUsers(res.data))

这里，我不使用useEffect，会出什么问题？

【问题讨论】：

每次组件渲染时都会调用它（例如props改变，hook状态改变）。试试吧。这会给你一个无限循环，因为每次你用getUsers更新状态，它都会重新渲染，触发另一个请求，触发另一个渲染，...

【参考方案1】：

首选useEffect(() => code... , [])。

也就是说，您也可以在避免无限循环的同时这样做，但这是一种非常糟糕的做法，我不建议这样做。

是的，您将进行重新渲染，但不会出现无限循环。使用useState's lazy init function。

const [users, getUsers] = useState(() => 
   axios.get("some api call")
     .then(res => getUsers(res.data))
);

【参考方案2】：

这样发出请求并更改渲染状态将导致组件永远重新渲染。

每次组件渲染时，例如由于道具改变或由于钩子改变，axios.get 请求被调用。当它得到响应时，它将更新状态。然后，由于状态发生了变化，组件重新渲染，axios.get 再次被调用。然后状态再次发生变化，请求再次发出，永远。

【参考方案3】：

最佳做法是：

const [users,getUsers]= useState();
useEffect ( () => 
   axios.get("some api call")
  .then(res=>getUsers(res.data))
, []);