1

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

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

这是一个例子：

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

5 回答 5

3

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

于 2019-07-16T06:32:06.077 回答
1

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

于 2020-07-03T03:13:21.610 回答
1

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

于 2019-07-16T06:40:06.340 回答
0

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

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

当您console.log在响应中时，您可以看到它。

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

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

于 2022-02-14T23:50:41.893 回答
0

当您需要组件生命周期之类componentWillMount或componentDidMount功能组件时，将使用useEffect钩子

于 2019-07-16T06:40:14.447 回答