---
title: 使用 React Hook 实现 Parse 后端实时更新技术指南
slug: docs-ch/react/real-time/react-hook-real-time
description: 学习如何在 React 项目中使用 @parse/react 库实现实时数据同步，集成 Back4App 服务。
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-19T18:26:49.824Z
---

# 使用 Parse 的 React hook 开始实时更新

## 介绍

将 Parse/Back4App 集成到您的基于 JavaScript 的项目中最简单的方法是通过 [Parse Javascript SDK](https://www.npmjs.com/package/parse). 该库适用于多种 JavaScript 环境，如 NodeJS、ReactJS、VueJS、AngularJS、React-Native，并为您提供对 Back4App 功能的访问。

Parse React 的 hook 目标是通过提供一个轻量级且易于使用的层，使 ReactJS 开发者的体验更好，该层提供最小的配置和代码重用。

使用此包将确保设置凭据、HTTP 请求、实时同步、离线优先交互等项目自动可用于您的 React 应用。该库完全用 TypeScript 编写，基于 [Parse Javascript SDK](https://www.npmjs.com/package/parse), 目前处于 Alpha 版本。

在本初始指南中，您将安装并设置 <font color="#2166ae">`@parse/react`</font> 库在您的 React 项目中。

:::hint{type="danger"}
<font color="#2166ae">`@parse/react`</font> 目前处于 Alpha 版本。该库正在测试中，因此我们建议谨慎使用。我们非常感谢您的反馈，因此请随时使用该库，并通过发送电子邮件至 community\@back4app.com 向我们提出您的问题和初步印象。
:::

## 先决条件

:::hint{type="info"}
要完成本教程，您需要：


- 在 Back4App 上创建一个 [应用](https://www.back4app.com/docs/get-started/new-parse-app)；
- 遵循 [启用实时查询](https://www.back4app.com/docs/platform/parse-live-query) 教程。
- [Npm ](https://www.npmjs.com/get-npm?utm_source=house\&utm_medium=homepage\&utm_campaign=free%20orgs\&utm_term=Install%20npm) 或 yarn 已安装；
- [Npx ](https://www.npmjs.com/package/npx) 包运行器已安装。
:::

## 1 - 安装

在您的 React 应用中安装 <font color="#2166ae">`@parse/react`</font> 及其对等依赖 <font color="#2166ae">`parse` </font>：

:::BlockQuote
\# 使用 yarn
yarn add @parse/react parse

\# 使用 npm
npm install --save @parse/react parse
:::

## 2 - 应用设置

为了让应用安全地连接到 Back4App 服务器，您必须在您的 <font color="#2166ae">`App.js`</font>（或 <font color="#2166ae">`App.tsx`</font>) 文件中提供 Parse JavaScript SDK 的应用凭据。请记得使用您在启用实时查询时创建的 Back4App 子域名。

:::CodeblockTabs
App.js or App.tsx

```javascript
1	import { initializeParse } from  '@parse/react';
2	
3	initializeParse(
4	  'YOUR_BACK4APP_SUBDOMAIN', // e.g. YOUR_APP_NAME.b4a.io
5	  'YOUR_APPLICATION_ID',
6	  'YOUR_JAVASCRIPT_KEY'
7	);
```
:::

请注意，<font color="#2166ae">`initializeParse`</font> 方法替代了通常的<font color="#2166ae">`Parse.initialize`</font>。您可以通过打开您的应用程序<font color="#2166ae">`App Id`</font>和<font color="#2166ae">`JavaScript Key`</font>凭据，访问您的应用程序<font color="#2166ae">`Dashboard` </font>，在[Back4App 网站](https://www.back4app.com/)上点击<font color="#2166ae">`Core Settings`</font>，在<font color="#2166ae">`Server Settings`</font>下.

## 3 - 创建您的第一个查询

接下来，您将构建您的第一个查询并在您的应用程序中显示它。<font color="#2166ae">`@parse/react`</font>库导出了一个<font color="#2166ae">`useParseQuery` </font>钩子，因此您无需浪费时间研究如何实现离线支持、实时更改等功能。

它接受一个<font color="#2166ae">`Parse.Query`</font>并返回一个对象，其中包含一些属性，您可以使用这些属性访问查询返回的数据：

:::CodeblockTabs
App.js or App.tsx

```javascript
1	import React from 'react';
2	import Parse from 'parse';
3	import { initializeParse, useParseQuery } from  '@parse/react';
4	
5	initializeParse(
6	  'YOUR_BACK4APP_SUBDOMAIN', // e.g. YOUR_APP_NAME.b4a.io
7	  'YOUR_APPLICATION_ID',
8	  'YOUR_JAVASCRIPT_KEY'
9	);
10	
11	export default function App() {
12	  //make sure your class is enabled for Real Time Notifications (Live Query) checking the menu -> App Settings -> Server Settings -> Server URL and Live Query
13	 const parseQuery = new Parse.Query('YOUR_CLASS_NAME_HERE');
14	 const {
15	    isLive,
16	    isLoading,
17	    isSyncing,
18	    results,
19	    count,
20	    error,
21	    reload
22	  } = useParseQuery(parseQuery);
23	
24	  return (
25	    <div>
26	      {isLoading && (
27	        <p>Loading...</p>
28	      )}
29	      {isLive && (
30	        <p>Live!</p>
31	      )}
32	      {isSyncing && (
33	        <p>Syncing...</p>
34	      )}
35	      {results && (
36	        <ul>
37	          {results.map(result => (
38	            <li key={result.id}>
39	              {result.get('CLASS_COLUMN_NAME_HERE')}
40	            </li>
41	          ))}
42	        </ul>
43	      )}
44	      <p>{count}</p>
45	      {error && (
46	        <p>{error.message}</p>
47	      )}
48	      <button
49	        onClick={reload}
50	      >
51	        Reload
52	      </button>
53	    </div>
54	  );
55	}
```
:::

当将查询传递给钩子时，它将首先查找可能已存储的缓存结果。然后，它创建一个 WebSocket 连接与 Back4app LiveQuery 服务器进行通信，该服务器会自动同步。换句话说，离线优先的方法和实时更改默认启用。

要检查查询状态，请使用 <font color="#2166ae">`props` </font>由钩子返回:

- <font color="#2166ae">`isLive`</font>: 如果 <font color="#2166ae">`true`</font>, 表示查询已订阅实时更新。
- <font color="#2166ae">`isLoading`</font>: 如果 <font color="#2166ae">`true`</font>, 查询正在获取结果。
- <font color="#2166ae">`isSyncing`</font>: 如果 <font color="#2166ae">`true`</font>, 查询正在从 Back4app 服务器获取更新结果。 <font color="#2166ae">`results`</font>: 这是查询返回的数据。
- <font color="#2166ae">`count`</font>: 表示与查询匹配的对象数量。
- <font color="#2166ae">`error`</font>: 当查询出现问题时，它会返回一个错误。
- <font color="#2166ae">`reload`</font>: 重新加载您的查询结果。

您可以查看 [完整文档](https://github.com/parse-community/parse-react/tree/master/packages/parse-react) 以获取有关如何设置和使用 <font color="#2166ae">`@parse/react`</font> 库的更多详细信息。

## 4 - 测试应用程序钩子

现在您应该能够运行您的 React 应用程序并查看结果。

:::BlockQuote
yarn start
:::

请记住，您应该向您的 Back4App 项目添加一些数据，以便在您的应用程序中查看一些项目。

## 完成了！

在这一点上，您已经在项目中安装了 <font color="#2166ae">`@parse/react`</font>，配置了与 Back4App 的连接，并编写了您的第一个查询。在下一个指南中，您将看到这个库的主要功能之一，如何通过创建一个示例实时聊天应用程序来使用它。