介绍
refire-react 是一个基于 Firebase 的 react 组件库。它提供了一些常见的 react 组件，用于连接 Firebase 数据（如实时数据库和 Firebase 认证）和 react 应用。
使用 refire-react 可以将 Firebase 数据库中的数据实时同步到你的 react 应用中。因此，你可以使用 Firebase 来存储数据，同时使用 refire-react 库来创建 react 应用的 UI。
安装
refire-react 可以通过 npm 安装，打开终端并输入以下命令:
npm install --save refire-react
配置 Firebase
在使用 refire-react 之前，你需要先配置 Firebase。你可以在 Firebase 控制台上创建一个新项目。然后，你需要从 Firebase 控制台中获取以下参数并在您的应用程序中设置它们：
apiKeyauthDomaindatabaseURLstorageBucket
-- -------------------- ---- ------- ------ -------- ---- ---------- ----- ------ - - ------- --------------- ----------- ------------------- ------------ -------------------- -------------- ---------------------- - ------------------------------
使用 refire-react
refire-react 提供了两个主要的组件，用于根据 Firebase 数据库实时更新 react 应用UI：
- FirebaseList
- FirebaseObject
FirebaseList
FirebaseList 组件可以用于获取 Firebase 数据库中的一个列表。它允许您监听 Firebase 数据库中的更改，并在列表数据更改时重新渲染 react 组件。以下是 FirebaseList 组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------ - ---- --------------
------ -------- ---- ----------
----- -------- - --------
----- ---- - -- -- -
------------- ----------------
-------- -- -
------ -
----
----------------- -- -
------ -
--- --------------
---------------------
--------------------
-----
-
---
-----
-
--
---------------
-
------ ------- ----在这个例子中，我们正在获取 Firebase 数据库中的 /books 列表。当 Firebase 数据库中的 /books 数据更改时，该组件将通过调用返回的函数 books 来重新渲染。您可以使用 books 数据来构建列表。
FirebaseObject
FirebaseObject 组件用于获取 Firebase 数据库中的对象。与 FirebaseList 组件类似，它也允许您监听 Firebase 数据库中的更改并重新渲染 react 组件。以下是 FirebaseObject 组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- - ---- --------------
------ -------- ---- ----------
----- ---------- - --------------
----- ------ - -- -- -
--------------- ------------------
------- -- -
------ -
-----
--------------------
-------------------
------
-
--
-----------------
-
------ ------- ------在这个例子中，我们正在获取 Firebase 数据库中的 /users/user1 对象。当 Firebase 数据库中的 /users/user1 对象更改时，该组件将通过调用函数 user 来重新渲染。您可以使用 user 数据来构建 UI。
高级用法
refire-react 还提供了高级组件，以及配置选项，帮助你更好地与 Firebase 数据库交互。
高级用法示例
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------------- ------ ----- - ---- --------------
------ -------- ---- ----------
----- -------- - --------
----- ----------- - ----------------------------------------------------
----- ---- - -- -- -
-------------- ----------------
-------- -- -
------ -
----
----------------- -- -
------ -
--- --------------
---------------------
--------------------
-----
-
---
-----
-
--
------ ---------------------
------ --------------
------ --- -- --- ----- ------ ----- --------
--------
--------
----------------
-
------ ------- ----在这个例子中，我们正在获取 Firebase 数据库中的 /books 数据，并提供了一个查询参数(标题排序、按标题检索哈利波特书籍)。我们使用了 FirebaseArray 组件而不是 FirebaseList，因为 FirebaseArray 可以更好地与查询一起工作。
同时我们使用了 Query 组件来执行 Firebase 查询(orderByChild=title)，Child 组件用于指定查询条件(value="harry")
总结
refire-react 是基于 Firebase 的 react 组件库，可以将 Firebase 数据库中的数据实时同步到你的 react 应用中。这极大地简化了与 Firebase 的集成，使创建实时 react 应用程序变得更加容易。通过使用 refire-react，我们可以显着减少代码量、时间和资源需求。因此，如果您正在寻找一种简单，快速地与 Firebase 集成的方法，那么 refire-react 组件库正是需要使用的工具！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606f81e8991b448de95a