使用 useEffect 和不使用它来响应获取请求答案

【问题标题】：React get request with useEffect and without it使用 useEffect 和不使用它来响应获取请求
【发布时间】：2022-01-23 20:24:25
【问题描述】：

这三个代码有什么区别？

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 的那个和其他的有什么区别？

【问题讨论】：

示例 #1 中缺少某些内容
@SerhiiHolinei 我只是保持简短。

标签： reactjs use-effect

【解决方案1】：

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

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

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

一切似乎都略有不同。

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

我们为什么要使用 useEffect？

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

【讨论】：