axios 取数据为什么要用useeffect() react hook？

Question

既然不用useEffect() hook就可以直接从axios取数据，那为什么要先用useEffect()再用axios呢？

还有，在什么情况下不需要useEffect()？

这是一个例子：

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

不使用 useEffect()：假设您的 setNotes(response.data) 是状态修改函数，它会在调用时触发组件的 re-render。

因此，当组件首次呈现时，它会进行 fetch 调用，响应会触发组件的 re-render。一旦 re-rendered，再次返回到组件的相同代码行，该代码行调用使用 axios 获取数据，它再次调用您的 setNotes() 并触发 re-render.. .它一直在渲染......永远。

当你在回复中 console.log 时你可以看到它。

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

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

axios 取数据为什么要用useeffect() react hook？

Why do we use useeffect() react hook while fetching data by axios?

fetch

reactjs

axios

react-hooks

use-effect