为什么我们在 axios 获取数据时使用 useeffect() react hook？答案

【问题标题】：Why do we use useeffect() react hook while fetching data by axios?为什么我们在 axios 获取数据时使用 useeffect() react hook？
【发布时间】：2019-11-24 19:56:25
【问题描述】：

既然不用useEffect()钩子就可以直接从axios获取数据，那为什么首选useEffect()再用axios呢？

另外，什么情况下不需要useEffect()？

这是一个例子：

useEffect(() => {
  axios
    .get('http://localhost:3001/notes')
    .then(response => {
      setNotes(response.data)
    })
}, [])

【问题讨论】：

如果你删除useEffect会发生什么？尝试在响应中添加console.log

标签： reactjs axios fetch react-hooks use-effect

【解决方案1】：

通过使用useEffect，你告诉 React 你的组件在渲染后需要做一些事情。 React 会记住你传递的函数，并在执行 DOM 更新后调用它。您在使用功能组件时使用 React Hooks，而在使用基于类的组件时，您可以在 componentDidMount() 方法中使用 axios 从 API 获取数据。

【讨论】：

【解决方案2】：

useEffect() 在第一次渲染后和每次更新后调用。在您的情况下，axios 服务将在渲染后和每次更新后调用，您可以从调用中删除 useEffect 并将 axios 放入 componentDidMount()

【讨论】：

【解决方案3】：

当你需要像componentWillMount或componentDidMount这样的组件生命周期在功能组件中会使用useEffect钩子

【讨论】：

【解决方案4】：

在 React 16.8 之后，我相信 React 社区正试图远离课堂。所以引入了钩子的概念。通过使用useEffect()，可以避免使用类组件的componentDidMount等。

【讨论】：

【解决方案5】：

不使用useEffect()：假设您的 setNotes(response.data) 是一个状态修改函数，它会在调用时触发组件的重新渲染。

因此，当组件第一次被渲染时，它会调用 fetch 调用，它会在响应时触发组件的重新渲染。一旦重新渲染，再次回到组件的相同代码行，该代码行调用使用 axios 获取数据，它再次调用您的 setNotes() 并触发重新渲染......并且它继续渲染。 ..永远。

您可以在回复中console.log 看到它。

默认情况下，效果会在每次完成渲染后运行，但您可以选择仅在某些值发生更改时触发它。

使用useEffect()时，传递一个空数组作为第二个参数会导致效果只运行一次；在组件的第一次渲染时。

【讨论】：