了解 React useEffect 函数

Question

我正在尝试了解如何在 React 中调用 Flask API。目前，我在App.js 文件中的App() 函数中定义了这个函数：

useEffect(() => {
    fetch('/').then(response =>
      response.json().then(data => {
        console.log(data)
      })
      )
  }, [])

我对 JavaScript 没有太多经验，而且我知道 React 的 JSX 可能会令人困惑，所以我希望有人能澄清我对这个函数的理解。

我认为这意味着什么：

1. 在启动时（由 [] 表示），调用这个没有输入的 JS 函数（由 {} 括号表示），如第一组空括号 () 所示
2. 从 Flask 应用程序，调用带有指定路由的端点
3. 获取此响应（我们已命名响应？），然后运行json() 方法将正文读取为json
4. 结果（我们有命名数据？）然后记录在控制台中。这里的大括号再次表示这是 JS(X) 代码

这是正确的吗？非常感谢任何反馈！

Answer 1

在启动时（由[]表示），调用这个没有输入的JS函数（由{}括号表示），如第一组空括号（）所示

非常正确。但重要的是要知道为什么[] 表示“启动时”

useEffect 接受两个参数。要运行的函数和要监视的依赖项列表。在任何依赖项发生更改后，该函数会立即重新运行。依赖项是一个空数组这一事实意味着它只会在第一次渲染后立即运行一次，因为任何依赖项都不可能改变。

从烧瓶应用程序中，调用带有指定路由的端点。

不确定 Flask 是什么，但这会向提供此 React 应用程序的域上的 / 路径发出请求。

获取这个响应（我们将其命名为 response？），然后运行 ​​json() 方法将正文读取为 json

fetch 返回一个最终会解决的承诺。您在该函数上调用 then 以提供一个在该承诺解决时调用的函数。该函数接受一个参数，该参数是已解决的承诺的值。您可以将其命名为任何您喜欢的名称，就像任何 javascript 函数参数一样。

然后将结果（我们命名为数据？）记录在控制台中。这里的大括号再次表示这是 JS(X) 代码

这里response.json 返回另一个等待响应数据被解析为 JSON 的承诺。您调用 then 处理该完成的新承诺。

我不确定你的意思是什么花括号，但这只是一个 javascript 数据结构。发布的代码中唯一的{} 声明了函数体。

---

您的代码中没有 JSX。仅调用 React 提供的函数的纯 javascript。

JSX 以尖括号为特征，例如：

<div>{someJavascriptvariableHere}</div>

应该是 JSX。