使用 React Hook 实现 Parse 后端实时更新技术指南

8 分

使用 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 版本。在本初始指南中，您将安装并设置 \@parse/react\ 库在您的 react 项目中。 \@parse/react\ 目前处于 alpha 版本。该库正在测试中，因此我们建议谨慎使用。我们非常感谢您的反馈，因此请随时使用该库，并通过发送电子邮件至 community\@back4app com 向我们提出您的问题和初步印象。先决条件要完成本教程，您需要：在 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 应用中安装 \@parse/react\ 及其对等依赖 \parse \ ： \# 使用 yarn yarn add @parse/react parse \# 使用 npm npm install save @parse/react parse 2 应用设置为了让应用安全地连接到 back4app 服务器，您必须在您的 \app js\ （或 \app tsx\ ) 文件中提供 parse javascript sdk 的应用凭据。请记得使用您在启用实时查询时创建的 back4app 子域名。 app js or app tsx 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 ); 请注意， \initializeparse\ 方法替代了通常的 \parse initialize\ 。您可以通过打开您的应用程序 \app id\ 和 \javascript key\ 凭据，访问您的应用程序 \dashboard \ ，在 back4app 网站 https //www back4app com/ 上点击 \core settings\ ，在 \server settings\ 下 3 创建您的第一个查询接下来，您将构建您的第一个查询并在您的应用程序中显示它。 \@parse/react\ 库导出了一个 \useparsequery \ 钩子，因此您无需浪费时间研究如何实现离线支持、实时更改等功能。它接受一个 \parse query\ 并返回一个对象，其中包含一些属性，您可以使用这些属性访问查询返回的数据： app js or app tsx 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 \loading \ 28 )} 29 {islive && ( 30 \live!\ 31 )} 32 {issyncing && ( 33 \syncing \ 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 \{count}\ 45 {error && ( 46 \{error message}\ 47 )} 48 \<button 49 onclick={reload} 50 > 51 reload 52 \</button> 53 \</div> 54 ); 55 } 当将查询传递给钩子时，它将首先查找可能已存储的缓存结果。然后，它创建一个 websocket 连接与 back4app livequery 服务器进行通信，该服务器会自动同步。换句话说，离线优先的方法和实时更改默认启用。要检查查询状态，请使用 \props \ 由钩子返回 \islive\ 如果 \true\ , 表示查询已订阅实时更新。 \isloading\ 如果 \true\ , 查询正在获取结果。 \issyncing\ 如果 \true\ , 查询正在从 back4app 服务器获取更新结果。 \results\ 这是查询返回的数据。 \count\ 表示与查询匹配的对象数量。 \error\ 当查询出现问题时，它会返回一个错误。 \reload\ 重新加载您的查询结果。您可以查看完整文档 https //github com/parse community/parse react/tree/master/packages/parse react 以获取有关如何设置和使用 \@parse/react\ 库的更多详细信息。 4 测试应用程序钩子现在您应该能够运行您的 react 应用程序并查看结果。 yarn start 请记住，您应该向您的 back4app 项目添加一些数据，以便在您的应用程序中查看一些项目。完成了！在这一点上，您已经在项目中安装了 \@parse/react\ ，配置了与 back4app 的连接，并编写了您的第一个查询。在下一个指南中，您将看到这个库的主要功能之一，如何通过创建一个示例实时聊天应用程序来使用它。