为什么我们在使用 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()

假设您的setNotes(response.data)是一个状态修改函数（从 返回的第二个值useState()），它在调用时会触发组件的重新渲染。

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

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

和useEffect()

默认情况下，效果会在每次完成的渲染后运行（类似于useEffect()根本不使用钩子），但您可以选择仅在某些值发生更改时才触发它，方法是向其传递带有变量的第二个参数数组。

传递空数组作为第二个参数会导致效果仅运行一次；在组件的第一次渲染上。

什么时候用、什么时候不用useEffect()？

当您想要在组件的渲染上执行一些副作用（数据获取、订阅、DOM 操作等）或当某些值自组件的上次渲染以来发生更改时，请使用该钩子。

useEffect()例如，当您有一个函数来获取某些事件（onClick、等）上的一些数据时，您不需要钩子onSubmit，因为这些函数不会在组件渲染时自动运行（它们仅在用户事件上运行） ）。