如何使用 React 中的 useEffect 钩子调用网络 API

_ 作者选择了 Creative Commons以作为 Write for Donations计划的一部分接收捐款。

介绍

在 [React] (https://reactjs.org/)开发中,web_应用程序编程接口_(API)是单页应用程序 (SPA)设计的一个组成部分. API是应用程序与服务器进行程序通信,为用户提供实时数据并保存用户变化的主要方式. 在React应用程序中,您将使用API来加载用户偏好,显示用户信息,获取配置或安全信息,并保存应用程序状态变化.

在这个教程中,您将使用)作为本地API进行测试. 当组件首次挂载时, 您将会加载信息, 用 API 保存客户输入 。 当用户进行更改时, 您也会刷新数据, 并学习当组件卸载时如何忽略 API 请求 。 到了这个教程结束时,你就能将你的回放应用程序连接到各种API上,并能够发送和接收实时数据.

前提条件

第1步:创建项目和本地API

在此步骤中,您将使用 JSON 服务器创建一个本地 REST API作为测试数据源,随后,您将构建一个应用程序来显示杂货列表并将项目添加到列表中。 JSON 服务器将是您的本地 API,并为您提供一个实时 URL,以执行GET和POST请求。使用本地 API,您有机会进行原型和测试组件,而您或其他团队正在开发实时 API。

到此步骤结束时,您将能够创建可与 React 应用程序连接的本地模仿 API。

在许多 敏捷团队上,前端和 API 团队在并行处理一个问题。为了在开发远程 API 时开发前端应用程序,您可以创建一个本地版本,在等待完整的远程 API 时使用。

您可以 使用 Node 创建一个简单的服务器或其他语言,但最快的方法是使用 JSON 服务器 Node 包。 这个项目从 JSON 文件创建了一个本地的 REST API。

首先,安装json服务器:

1npm install --save-dev json-server

安装完成后,您将收到一个成功消息:

1[secondary_label Output]
2+ [email protected]
3added 108 packages from 40 contributors and audited 1723 packages in 14.505s
4
573 packages are looking for funding
6  run `npm fund` for details
7
8found 0 vulnerabilities

json-server 建立了基于 [JavaScript 对象] 的 API(https://andsky.com/tech/tutorials/understanding-objects-in-javascript). 密钥是 URL 路径,值被返回作为回应。 您将 JavaScript 对象存储在本地,并将其交付给您的源控制。

在应用程序的根中打开一个名为db.json的文件,这将是存储您从API请求的信息的JSON:

1nano db.json

添加一个具有)值的 [ 数组] 值与一个id和一个项目密钥. 这将列出食品列表的项目。 列表密钥最终会给你一个 URL 与/列表的终点:

1[label api-tutorial/db.json]
2{
3  "list": [
4    { "id": 1, "item": "bread" },
5    { "id": 2, "item": "grapes" }
6  ]
7}

在这个片段中,你有硬代码的面包和葡萄作为你的杂货列表的起点。

保存和关闭文件. 要运行 API 服务器,您将使用)。

打开package.json:

1nano package.json

然后添加一个脚本来运行 API. 此外,添加一个延迟属性. 这将导致响应的延迟,从而在您的 API 请求和 API 响应之间产生延迟. 这将为您提供一些关于应用程序在等待服务器响应时的行为的见解。 添加一个延迟的1500毫秒。 最后,使用p选项在端口3333上运行 API,以免与Create-react-app脚本运行发生冲突:

 1[label api-tutorial/package.json]
 2{
 3  "name": "do-14-api",
 4  "version": "0.1.0",
 5  "private": true,
 6  "dependencies": {
 7    "@testing-library/jest-dom": "^4.2.4",
 8    "@testing-library/react": "^9.3.2",
 9    "@testing-library/user-event": "^7.1.2",
10    "react": "^16.13.1",
11    "react-dom": "^16.13.1",
12    "react-scripts": "3.4.3"
13  },
14  "scripts": {
15    "api": "json-server db.json -p 3333 --delay 1500",
16    "start": "react-scripts start",
17    "build": "react-scripts build",
18    "test": "react-scripts test",
19    "eject": "react-scripts eject"
20  },
21  "eslintConfig": {
22    "extends": "react-app"
23  },
24  "browserslist": {
25    "production": [
26      ">0.2%",
27      "not dead",
28      "not op_mini all"
29    ],
30    "development": [
31      "last 1 chrome version",
32      "last 1 firefox version",
33      "last 1 safari version"
34    ]
35  },
36  "devDependencies": {
37    "json-server": "^0.16.1"
38  }
39}

在新的终端或卡上,使用以下命令启动 API 服务器:

1npm run api

继续在其余的教程中运行。

当您运行命令时,您将收到一个输出,其中列出了 API 资源:

 1[secondary_label Output]
 2> json-server db.json -p 3333
 3
 4  \{^_^}/ hi!
 5
 6  Loading db.json
 7  Done
 8
 9  Resources
10  http://localhost:3333/list
11
12  Home
13  http://localhost:3333
14
15  Type s + enter at any time to create a snapshot of the database

開啟 http://localhost:3333/list 並找到直播 API:

API results, 1

当您在浏览器中打开一个终端点时,您正在使用GET方法,但json-server不限于GET方法,您还可以执行许多其他REST方法,例如,您可以POST新项目,在新的终端窗口或卡中,使用curl到POST一个具有application/json类型的新项目:

1curl -d '{"item":"rice"}' -H 'Content-Type: application/json' -X POST http://localhost:3333/list

请注意,在发送内容之前,您必须对内容进行序列化,然后运行弯曲命令后,您将收到成功消息:

1[secondary_label Output]
2{
3  "item": "rice",
4  "id": 3
5}

如果您更新浏览器,新项目将显示:

Updated content, 2

「POST」请求还会更新「db.json」文件. 请注意这些更改,因为在您在应用程序上工作时,没有障碍于意外保存非结构化或无用的内容。

在此步骤中,您创建了一个本地 API. 您学会了如何创建具有默认值的静态文件,以及如何使用 RESTful 操作(如)获取或更新这些值。

步骤 2 — 从使用useEffect的 API 获取数据

在此步骤中,您将使用useEffect链接收集一份食品店列表。您将创建一个服务,以在单独的目录中消耗 API,并在您的 React 组件中调用该服务。

在此步骤结束时,您将能够使用 Fetch 方法和 useEffect Hook 调用 Web API。

现在你有一个工作 API,你需要一个服务来获取数据和组件来显示信息。 开始创建一个服务. 你可以直接在任何 React 组件中获取数据,但如果你将数据获取功能与显示组件分开,你的项目将更容易浏览和更新。

在src目录中创建一个名为服务的目录:

1mkdir src/services

然后在文本编辑器中打开名为list.js的文件:

1nano src/services/list.js

您将使用此文件在 /list 端点上的任何操作。 添加一个函数以使用 fetch 函数获取数据:

1[label api-tutorial/src/services/list]
2export function getList() {
3  return fetch('http://localhost:3333/list')
4    .then(data => data.json())
5}

该函数的唯一目标是访问数据并使用data.json()方法将响应转换为 JSON。

除了)可以为您提供直观的界面,并允许您添加默认标题或在服务中执行其他操作。

然后打开App.css,并添加一些最小的样式:

1nano src/components/App/App.css

通过替换 CSS 以以下方式添加一个包含少量的包裹类:

1[label api-tutorial/src/components/App/App.css]
2.wrapper {
3    padding: 15px;
4}

保存和关闭文件. 现在您需要添加代码来获取数据并在您的应用中显示。

打开App.js:

1nano src/components/App/App.js

在功能组件中,您可以使用 useEffect Hook 来获取数据,当组件加载或某些信息发生变化时。有关 useEffect Hook 的更多信息,请参阅 How To Handle Async Data Loading, Lazy Loading, and Code Splitting with React。

导入useEffect和useState,然后创建一个名为list的变量和一个名为setList的设置器,以保持您使用useState夹从服务中获取的数据:

 1[label api-tutorial/src/components/App/App.js]
 2import React, { useEffect, useState } from 'react';
 3import './App.css';
 4
 5function App() {
 6  const [list, setList] = useState([]);
 7  return(
 8    <>
 9    </>
10  )
11}
12
13export default App;

接下来,导入服务,然后在您的)。

目前,当页面加载时,您只运行一次效果,因此依赖数组将是空的. 在下一步中,您将根据不同的页面操作触发效果,以确保您始终拥有最新的信息。

添加以下突出的代码:

 1[label api-tutorial/src/components/App/App.js]
 2
 3import React, { useEffect, useState } from 'react';
 4import './App.css';
 5import { getList } from '../../services/list';
 6
 7function App() {
 8  const [list, setList] = useState([]);
 9
10  useEffect(() => {
11   let mounted = true;
12   getList()
13     .then(items => {
14       if(mounted) {
15         setList(items)
16       }
17     })
18   return () => mounted = false;
19 }, [])
20
21  return(
22    <>
23    </>
24  )
25}
26
27export default App;

最后,点击 .map并在列表中显示它们:

 1[label api-tutorial/src/components/App/App]
 2import React, { useEffect, useState } from 'react';
 3import './App.css';
 4import { getList } from '../../services/list';
 5
 6function App() {
 7  const [list, setList] = useState([]);
 8
 9  useEffect(() => {
10    let mounted = true;
11    getList()
12      .then(items => {
13        if(mounted) {
14          setList(items)
15        }
16      })
17    return () => mounted = false;
18  }, [])
19
20  return(
21    <div className="wrapper">
22     <h1>My Grocery List</h1>
23     <ul>
24       {list.map(item => <li key={item.item}>{item.item}</li>)}
25     </ul>
26   </div>
27  )
28}
29
30export default App;

保存和关闭文件. 当你这样做时,浏览器将更新,你会找到一个列表的项目:

List Items, 3

在此步骤中,您设置了从 API 获取数据的服务,您了解了如何使用)。

在下一步中,您将使用POST向 API 提交数据,并使用响应来提醒用户操作成功。

步骤 3 – 将数据发送到 API

在此步骤中,您将使用 Fetch API 和)以与在提交事件处理器发送数据,并在操作完成后显示成功消息。

到此步骤结束时,您将能够向 API 发送信息,并在请求解决时通知用户。

将数据发送到服务

你有一個應用程式,會顯示食品產品列表,但它不是一個非常有用的食品產品應用程式,除非你也可以儲存內容。

打开src/services/list.js:

1nano src/services/list.js

在文件中,添加一个函数,将一个项目作为一个论点,并将使用POST方法将数据发送到API。 像以前一样,您可以使用Fetch API。 这一次,您需要更多的信息。 作为第二个论点添加一个选项对象。 包括方法――POST――以及标题将内容类型设置为应用程序/json。 最后,将新对象发送到体。 请确保将对象转换为使用JSON.stringify的字符串。

当您收到回复时,将该值转换为 JSON:

 1[label tutorial/src/services/list.js]
 2export function getList() {
 3  return fetch('http://localhost:3333/list')
 4    .then(data => data.json())
 5}
 6
 7export function setItem(item) {
 8 return fetch('http://localhost:3333/list', {
 9   method: 'POST',
10   headers: {
11     'Content-Type': 'application/json'
12   },
13   body: JSON.stringify({ item })
14 })
15   .then(data => data.json())
16}

保存并关闭文件。

注意:在生产应用程序中,您需要添加错误处理和检查。例如,如果您错误编写终端点,您仍然会收到一个)`方法会返回一个空对象。

现在你已经创建了一个服务,你需要在你的组件内消耗该服务。

打开App.js:

1nano src/components/App/App.js

添加一个围绕一个输入和一个提交按钮的形式元素:

 1[label api-tutorial/src/components/App/App.js]
 2
 3import React, { useEffect, useState } from 'react';
 4import './App.css';
 5import { getList } from '../../services/list';
 6
 7function App() {
 8  const [list, setList] = useState([]);
 9
10  useEffect(() => {
11    let mounted = true;
12    getList()
13      .then(items => {
14        if(mounted) {
15          setList(items)
16        }
17      })
18    return () => mounted = false;
19  }, [])
20
21  return(
22    <div className="wrapper">
23      <h1>My Grocery List</h1>
24      <ul>
25        {list.map(item => <li key={item.item}>{item.item}</li>)}
26      </ul>
27      <form>
28       <label>
29         <p>New Item</p>
30         <input type="text" />
31       </label>
32       <button type="submit">Submit</button>
33     </form>
34    </div>
35  )
36}
37
38export default App;

请确保将输入围绕在一个标签,以便表单可以通过屏幕阅读器访问。

保存文件. 当你这样做时,浏览器会更新,你会找到你的表格。

Grocery List Form

接下来,将 input 转换为 控制组件。您将需要一个控制组件,以便您可以在用户成功提交新列表项目后清除该领域。

首先,创建一个新的状态处理器,以使用useState口袋来持有和设置输入信息:

 1[label api-tutorial/src/components/App/App.js]
 2import React, { useEffect, useState } from 'react';
 3import './App.css';
 4import { getList } from '../../services/list';
 5
 6function App() {
 7  const [itemInput, setItemInput] = useState('');
 8  const [list, setList] = useState([]);
 9
10  useEffect(() => {
11    let mounted = true;
12    getList()
13      .then(items => {
14        if(mounted) {
15          setList(items)
16        }
17      })
18    return () => mounted = false;
19  }, [])
20
21  return(
22    <div className="wrapper">
23      <h1>My Grocery List</h1>
24      <ul>
25        {list.map(item => <li key={item.item}>{item.item}</li>)}
26      </ul>
27      <form>
28        <label>
29          <p>New Item</p>
30          <input type="text" onChange={event => setItemInput(event.target.value)} value={itemInput} />
31        </label>
32        <button type="submit">Submit</button>
33      </form>
34    </div>
35  )
36}
37
38export default App;

创建状态处理器后,将输入的值设置为itemInput,并通过使用onChange事件处理器将event.target.value传输到setItemInput函数来更新该值。

现在您的用户可以用新的列表项目填写表单,然后将该表单连接到您的服务。

创建一个名为)`,以阻止表单更新浏览器。

从服务中导入setItem,然后在handleSubmit函数内使用itemInput值拨打setItem。

 1[label api-tutorial/src/components/App/App.js]
 2import React, { useEffect, useState } from 'react';
 3import './App.css';
 4import { getList, setItem } from '../../services/list';
 5
 6function App() {
 7  const [itemInput, setItemInput] = useState('');
 8  const [list, setList] = useState([]);
 9
10  useEffect(() => {
11    let mounted = true;
12    getList()
13      .then(items => {
14        if(mounted) {
15          setList(items)
16        }
17      })
18    return () => mounted = false;
19  }, [])
20
21  const handleSubmit = (e) => {
22    e.preventDefault();
23    setItem(itemInput)
24  };
25
26  return(
27    <div className="wrapper">
28      <h1>My Grocery List</h1>
29      <ul>
30        {list.map(item => <li key={item.item}>{item.item}</li>)}
31      </ul>
32      <form onSubmit={handleSubmit}>
33        <label>
34          <p>New Item</p>
35          <input type="text" onChange={event => setItemInput(event.target.value)} value={itemInput} />
36        </label>
37        <button type="submit">Submit</button>
38      </form>
39    </div>
40  )
41}
42
43export default App;

保存文件. 当您这样做时,您将能够提交值. 请注意,您将在网络卡中收到成功的响应. 但列表不会更新,输入不会清除。

Submit successful, 5

显示成功信息

总是给用户一些迹象表明他们的行动成功,否则用户可能会尝试多次重新提交一个值,或者认为他们的行动失败并将离开应用程序。

要做到这一点,请使用useState创建一个状态变量和设置函数,以表示是否要向用户显示警报消息。

当 setItem 承诺解决时,请清除输入并设置警告消息:

 1[label api-tutorial/src/components/App/App.js]
 2import React, { useEffect, useState } from 'react';
 3import './App.css';
 4import { getList, setItem } from '../../services/list';
 5
 6function App() {
 7  const [alert, setAlert] = useState(false);
 8  const [itemInput, setItemInput] = useState('');
 9  const [list, setList] = useState([]);
10
11  useEffect(() => {
12    let mounted = true;
13    getList()
14      .then(items => {
15        if(mounted) {
16          setList(items)
17        }
18      })
19    return () => mounted = false;
20  }, [])
21
22  const handleSubmit = (e) => {
23    e.preventDefault();
24    setItem(itemInput)
25      .then(() => {
26        setItemInput('');
27        setAlert(true);
28      })
29  };
30
31  return(
32    <div className="wrapper">
33      <h1>My Grocery List</h1>
34      <ul>
35        {list.map(item => <li key={item.item}>{item.item}</li>)}
36      </ul>
37      {alert && <h2> Submit Successful</h2>}
38      <form onSubmit={handleSubmit}>
39        <label>
40          <p>New Item</p>
41          <input type="text" onChange={event => setItemInput(event.target.value)} value={itemInput} />
42        </label>
43        <button type="submit">Submit</button>
44      </form>
45    </div>
46  )
47}
48
49export default App;

当您这样做时,页面将更新,您将在 API 请求解决后看到成功消息。

Submit and message, 6

您可以添加许多其他优化方法,例如,您可能希望在有活跃请求时禁用表单输入。您可以在 [How To Build Forms in React] 中了解有关禁用表单元素的更多信息(https://andsky.com/tech/tutorials/how-to-build-forms-in-react)。

现在你已经警告了一个用户,结果是成功的,但警告消息不会消失,列表不会更新. 要修复此问题,请先隐藏警告。 在这种情况下,您希望在短时间内隐藏信息,例如一秒钟后。

在App.js中创建一个新的效果,并将警告传递到触发器的组合中。这会导致效果在任何时候运行警告变更。 请注意,如果警告从假变更为真,则会运行,但当警告从真变更为假时也会运行。

 1[label api-tutorial/src/components/App/App.js]
 2import React, { useEffect, useState } from 'react';
 3import './App.css';
 4import { getList, setItem } from '../../services/list';
 5
 6function App() {
 7  const [alert, setAlert] = useState(false);
 8  const [itemInput, setItemInput] = useState('');
 9  const [list, setList] = useState([]);
10    ...
11
12  useEffect(() => {
13    if(alert) {
14      setTimeout(() => {
15        setAlert(false);
16      }, 1000)
17    }
18  }, [alert])
19
20  const handleSubmit = (e) => {
21    e.preventDefault();
22    setItem(itemInput)
23      .then(() => {
24        setItemInput('');
25        setAlert(true);
26      })
27  };
28
29  return(
30    <div className="wrapper">
31      ...
32    </div>
33  )
34}
35
36export default App;

在1000毫秒后运行setTimeout函数,以确保用户有时间阅读更改。

保存文件. 现在你有一个效果,每次警报变化就会运行. 如果有一个活跃的警报,它会启动一个时间关闭功能,在一秒钟后关闭警报。

Hide alert, 7

更新收集的数据

现在你需要一种方法来刷新 过时的数据列表。 要做到这一点,可以给 " 使用效果 " 增加一个新的触发器。 虎克重播"GetList"请求. 为了保证您拥有最相关的数据, 您需要一个触发器, 可以在远程数据有变化时更新 。 幸运的是,你可以重新使用警报状态来触发另一个更新数据,因为你知道用户随时会更新数据。 和以前一样,你必须计划,每当`警报 ' 改变,包括警报信息消失时,效果就会运行.

此时,该效果还需要在页面加载时检索数据。创建一个条件值,如果list.length是真实的,如果list.length表示您已经检索了数据,而alert表示false,则表示您已经更新了数据。

 1import React, { useEffect, useState } from 'react';
 2import './App.css';
 3import { getList, setItem } from '../../services/list';
 4
 5function App() {
 6  const [alert, setAlert] = useState(false);
 7  const [itemInput, setItemInput] = useState('');
 8  const [list, setList] = useState([]);
 9
10  useEffect(() => {
11    let mounted = true;
12    if(list.length && !alert) {
13      return;
14    }
15    getList()
16      .then(items => {
17        if(mounted) {
18          setList(items)
19        }
20      })
21    return () => mounted = false;
22  }, [alert, list])
23
24  ...
25
26  return(
27    <div className="wrapper">
28      ...
29    </div>
30  )
31}
32
33export default App;

当您这样做时,在您提交新项目后,数据将更新:

List Refresh, 8

在这种情况下,警告并不直接与列表状态相关,但它确实同时发生,会使旧数据无效,因此您可以使用它来更新数据。

防止未安装的组件更新

您需要考虑的最后一个问题是确保您不将状态设置在未安装的组件上。您有解决方案以解决让安装 = true问题,以获取数据,但解决方案不会对处理提交工作,因为它不是一个效果。

要解决此问题,您可以通过将安装从useEffect夹克中取出并将其保持在组件水平上来创建一个共享变量,该变量被多个函数使用,您仍然会使用该函数在useEffect末尾将值设置为false。

在App.js中,在函数开始时声明安装。然后检查在其他非同步函数中设置数据之前是否安装了该组件。

 1[label api-tutorial/src/components/App/App.js]
 2import React, { useEffect, useState } from 'react';
 3import './App.css';
 4import { getList, setItem } from '../../services/list';
 5
 6function App() {
 7  const [alert, setAlert] = useState(false);
 8  const [itemInput, setItemInput] = useState('');
 9  const [list, setList] = useState([]);
10  let mounted = true;
11
12  useEffect(() => {
13    if(list.length && !alert) {
14      return;
15    }
16    getList()
17      .then(items => {
18        if(mounted) {
19          setList(items)
20        }
21      })
22    return () => mounted = false;
23  }, [alert, list])
24
25  useEffect(() => {
26    if(alert) {
27      setTimeout(() => {
28        if(mounted) {
29          setAlert(false);
30        }
31      }, 1000)
32    }
33  }, [alert])
34
35  const handleSubmit = (e) => {
36    e.preventDefault();
37    setItem(itemInput)
38      .then(() => {
39        if(mounted) {
40          setItemInput('');
41          setAlert(true);
42        }
43      })
44  };
45
46  return(
47    <div className="wrapper">
48      ...
49    </div>
50  )
51}
52
53export default App;

当您进行更改时,您将在运行 React 应用程序的终端中收到错误:

1[secondary_label Error]
2Assignments to the 'mounted' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps

React 提醒你变量不稳定. 每当有重新渲染时,它会重新计算变量. 通常,这将确保最新的信息。

解决方案是另一个被称为 useRef. 该 useRef Hook 将保留一个变量为组件的寿命。 唯一的技巧是获得您需要使用 .current 属性的值。

在App.js中,使用useRef链接将mounted转换为参考,然后将每个使用mounted转换为mounted.current:

 1[label api-tutorial/src/components/App/App.js]
 2import React, { useEffect, useRef, useState } from 'react';
 3import './App.css';
 4import { getList, setItem } from '../../services/list';
 5
 6function App() {
 7  const [alert, setAlert] = useState(false);
 8  const [itemInput, setItemInput] = useState('');
 9  const [list, setList] = useState([]);
10  const mounted = useRef(true);
11
12  useEffect(() => {
13    mounted.current = true;
14    if(list.length && !alert) {
15      return;
16    }
17    getList()
18      .then(items => {
19        if(mounted.current) {
20          setList(items)
21        }
22      })
23    return () => mounted.current = false;
24  }, [alert, list])
25
26  useEffect(() => {
27    if(alert) {
28      setTimeout(() => {
29        if(mounted.current) {
30          setAlert(false);
31        }
32      }, 1000)
33    }
34  }, [alert])
35
36  const handleSubmit = (e) => {
37    e.preventDefault();
38    setItem(itemInput)
39      .then(() => {
40        if(mounted.current) {
41          setItemInput('');
42          setAlert(true);
43        }
44      })
45  };
46
47  return(
48    <div className="wrapper">
49       ...
50    </div>
51  )
52}
53
54export default App;

此外,要小心在清理函数中的变量设置为) => mounted.current = false每次警告或列表更改时都会运行。为了避免任何错误的结果,请确保在效果开始时更新mounted.current到true`。

保存和关闭文件. 当浏览器更新时,您将能够保存新的列表项目:

Saving again, 9

<美元 > [注] 说明: 意外重运行一个API多次是一个常见的问题. 每次一个组件被移除然后重新挂载时,您都会重新运行所有原始数据采集. 为避免这种情况,考虑对特别重或慢的数据API采用缓存方法. 您可以使用从 [memoizing] (https://github.com/alexreardon/memoize-one) 服务电话,到[与服务人员联系] (https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker),到自定义的钩子。 有一些流行的用于缓存服务呼叫的自定义钩,包括[useSWR] (https://github.com/vercel/swr)和[反应查询] (https://github.com/tannerlinsley/react-query).

无论您使用哪种方法,请务必考虑如何取消缓存,因为有时您需要获取最新的数据。

在此步骤中,您将数据发送到 API. 您了解如何在提交数据时更新用户,以及如何触发列表数据的更新。

结论

API为您提供了连接许多有用的服务的能力. 它们允许您在用户关闭浏览器或停止使用应用程序后存储并检索数据. 通过精心编排的代码,您可以将您的服务从您的组件中分离出来,这样您的组件就可以专注于渲染数据而不知道数据来源. Web API 将您的应用程序扩展到远远超过浏览器会话或存储的能力. 他们打开了你的应用 整个网络技术的世界.

如果您想阅读更多 React 教程,请查看我们的 React 主题页面,或返回 如何编码在 React.js 系列页面。

Published At
Categories with 技术
Tagged with
comments powered by Disqus