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

使用 parse 的 react hook 开始实时更新 介绍 将 parse/back4app 集成到您的基于 javascript 的项目中最简单的方法是通过 parse javascript sdk 该库适用于多种 javascript 环境，如 nodejs、reactjs、vuejs、angularjs、react native，并为您提供对 back4app 功能的访问。 parse react 的 hook 目标是通过提供一个轻量级且易于使用的层，使 reactjs 开发者的体验更好，该层提供最小的配置和代码重用。 使用此包将确保设置凭据、http 请求、实时同步、离线优先交互等项目自动可用于您的 react 应用。该库完全用 typescript 编写，基于 parse javascript sdk , 目前处于 alpha 版本。 在本初始指南中，您将安装并设置 @parse/react @parse/react 库在您的 react 项目中。 @parse/react @parse/react 目前处于 alpha 版本。该库正在测试中，因此我们建议谨慎使用。我们非常感谢您的反馈，因此请随时使用该库，并通过发送电子邮件至 community\@back4app com 向我们提出您的问题和初步印象。 先决条件 要完成本教程，您需要： 在 back4app 上创建一个 应用 ； 遵循 启用实时查询 教程。 npm 或 yarn 已安装； npx 包运行器已安装。 1 安装 在您的 react 应用中安装 @parse/react @parse/react 及其对等依赖 parse parse ： 2 应用设置 为了让应用安全地连接到 back4app 服务器，您必须在您的 app js app js （或 app tsx app tsx ) 文件中提供 parse javascript sdk 的应用凭据。请记得使用您在启用实时查询时创建的 back4app 子域名。 app js or app tsx 1 import { initializeparse } from '@parse/react'; 2&#x9; 3 initializeparse( 4 'your back4app subdomain', // e g your app name b4a io 5 'your application id', 6 'your javascript key' 7 ); 请注意， initializeparse initializeparse 方法替代了通常的 parse initialize parse initialize 。您可以通过打开您的应用程序 app id app id 和 javascript key javascript key 凭据，访问您的应用程序 dashboard dashboard ，在 back4app 网站 https //www back4app com/ 上点击 core settings core settings ，在 server settings server settings 下 3 创建您的第一个查询 接下来，您将构建您的第一个查询并在您的应用程序中显示它。 @parse/react @parse/react 库导出了一个 useparsequery useparsequery 钩子，因此您无需浪费时间研究如何实现离线支持、实时更改等功能。 它接受一个 parse query 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&#x9; 5 initializeparse( 6 'your back4app subdomain', // e g your app name b4a io 7 'your application id', 8 'your javascript key' 9 ); 10&#x9; 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&#x9; 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 服务器进行通信，该服务器会自动同步。换句话说，离线优先的方法和实时更改默认启用。 要检查查询状态，请使用 props props 由钩子返回 islive islive 如果 true true , 表示查询已订阅实时更新。 isloading isloading 如果 true true , 查询正在获取结果。 issyncing issyncing 如果 true true , 查询正在从 back4app 服务器获取更新结果。 results results 这是查询返回的数据。 count count 表示与查询匹配的对象数量。 error error 当查询出现问题时，它会返回一个错误。 reload reload 重新加载您的查询结果。 您可以查看 完整文档 以获取有关如何设置和使用 @parse/react @parse/react 库的更多详细信息。 4 测试应用程序钩子 现在您应该能够运行您的 react 应用程序并查看结果。 请记住，您应该向您的 back4app 项目添加一些数据，以便在您的应用程序中查看一些项目。 完成了！ 在这一点上，您已经在项目中安装了 @parse/react @parse/react ，配置了与 back4app 的连接，并编写了您的第一个查询。在下一个指南中，您将看到这个库的主要功能之一，如何通过创建一个示例实时聊天应用程序来使用它。