使用useEffect和不使用它来响应get请求

Question

这三个代码之间有什么区别？

1:

axios.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
console.log(res);
})
.catch((err) => {
});
function App() {
return (
<div className="App">
<p>Learn React</p>
</div>
);
}
export default App;

2:

function App() {
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
console.log(res);
})
.catch((err) => {
});
}, []);
return (
<div className="App">
<p>Learn React</p>
</div>
);
}
export default App;

3:

function App() {
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
console.log(res);
})
.catch((err) => {
});
return (
<div className="App">
<p>Learn React</p>
</div>
);
}
export default App;

所有这些似乎都略有不同。我们为什么使用useEffect？不使用它似乎效果很好。我使用useEffect的那个和其他的有什么区别？

Answer 1

第一个示例在加载应用程序时执行一次AJAX操作，然后再也不执行。因为它不是组件的一部分，所以它只是在处理JavaScript模块后立即执行。

第二个示例在加载<App>组件的实例时执行AJAX操作，但仅在初始加载时执行。如果要加载<App>组件的新实例，则会再次执行该操作。(这对于惯用的<App>组件来说不太可能，但对于大多数组件来说很可能。(

第三个示例在每次<App>组件渲染时都执行AJAX操作。如果要设置任何触发重新渲染的状态，则将重新调用AJAX请求。这不太可能是理想的行为。

所有这些似乎都略有不同。

在这个最小的人为例子中，是的。这里显示的应用程序没有真正的复杂性，只有一个组件。

我们为什么使用useEffect？

根据调用useEffect时使用的依赖项数组，对组件的任何给定呈现执行操作。只有当依赖项数组中的项发生更改时，才会执行该操作。如果提供了一个空数组，则该操作将仅在该组件实例的第一次渲染时发生。