既然数据可以在不使用钩子的情况下直接从 axios 获取useEffect()那么为什么最好先使用useEffect()然后使用 axios？
另外，在哪种情况下不需要useEffect()？
下面是一个示例：
useEffect(() => {
axios
.get('http://localhost:3001/notes')
.then(response => {
setNotes(response.data)
})
}, [])
通过使用useEffect，你告诉 React 你的组件需要在渲染后做一些事情。React 会记住你传递的函数，并在执行 DOM 更新后调用它。 您可以在使用功能组件时使用 React Hooks，而使用基于类的组件，您可以在componentDidMount()方法中使用axios从 API 获取数据。
不带useEffect()
假设您的setNotes(response.data)是一个状态修改函数(从useState()返回的第二个值)，它会在调用时触发组件的重新渲染。
因此，当组件首次渲染时，它会进行 fetch 调用，该调用在响应时触发组件的重新渲染。一旦重新渲染，再次回到组件的相同代码行，该代码行调用使用 axios 获取数据，再次调用您的setNotes()并触发重新渲染......并且它一直在渲染...永远。
当您console.log响应中时，您可以看到它。
带useEffect()
默认情况下，效果会在每次完成的渲染后运行(类似于根本不使用useEffect()钩子)，但您可以选择仅在某些值发生更改时才触发它，方法是向它传递带有变量的第二个参数数组。
将空数组作为第二个参数传递会导致效果仅在组件的第一次呈现上运行一次。
何时以及何时不使用useEffect()？
当您想对组件的渲染进行一些副作用(数据获取、订阅、DOM 操作等)时，或者当某些值与组件的上次渲染相比发生了变化时，请使用钩子。
例如，当您有一个函数来获取某些事件(onClick、onSubmit等)上的一些数据时，您不需要useEffect()钩子，因为这些数据不会在组件渲染上自动运行(它们仅在用户事件上运行)。
useEffect()在第一次渲染之后和每次更新后调用。在你的例子中，axios 服务将在渲染后和每次更新后调用，你可以从调用中删除 useEffect 并将 axios 放在componentDidMount()中
在 React 16.8 之后，我相信 react 社区正试图远离这个类。因此引入了钩子概念。通过使用useEffect()，你可以避免使用类组件的componentDidMount等。
当你需要组件生命周期时，如功能组件中的componentWillMount或componentDidMount将使用useEffect钩