使用 useEffect 和不使用它来反应获取请求

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 请求。这不太可能是期望的行为。

All there seems to work with a slight difference.

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

Why do we use useEffect?

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

使用 useEffect 和不使用它来反应获取请求

React get request with useEffect and without it

reactjs

use-effect