前言
React 是前端界最热门的框架之一，而且由于其组件化的特性，使得其流行度非常高。但是，由于不可避免的业务变化，经常需要对不同的数据源进行操作，为了避免每次都重新获取数据、渲染组件的麻烦，可以使用一个数据库工具库 react-rebase。
该库是 firebase 公司出品的，主要作用是将 React 和 firebase 的数据库实时同步，可以在组件被挂载到 DOM 树中时创建数据连接，并在组件卸载时及时地断开数据连接，从而实现数据的实时更新。
安装 react-rebase
要使用 react-rebase，首先要在项目中安装它。你可以使用以下命令：
npm install react-rebase --save
这个命令会将 react-rebase 安装到你的项目中，并添加到 dependencies 列表中。
初始化 react-rebase
在使用 react-rebase 前，需要进行初始化操作。初始化涉及到两个部分：firebase 配置，和 react-rebase 配置。
Firebase 配置
要使用 react-rebase，你需要先配置一个 firebase 数据库账号。你可以在 Firebase 的官网申请一个免费的账号。
进入 Firebase 网站，单击左上角的菜单，在弹出的菜单中，选择“添加项目”。
输入项目名称，选择国家和地区，单击“创建项目”。
然后，创建一个数据库，并将其设置为实时数据库。
最后，找到“Project settings” -> “Service accounts” -> “Generate new private key”，下载保存该文件。
得到上述文件后，在项目中新建一个 js 文件，命名为 firebaseConfig.js，写入下面的代码：
-- -------------------- ---- ------- ------ -------- ---- --------------------- ------ -------------------------- ----- -------------- - - -- -- ------------------- ----------------- - -------------------------------------- ------ ------- --------
将上面的代码中的 firebaseConfig 替换成你在 firebase 网站上的配置。
React-rebase 配置
react-rebase 是由 firebase 专门为 React 设计的。它会将 firebase 的数据与 React 的状态同步。为了使用 react-rebase，需要引入它，并将数据传递给 firebase，并创建 react-rebase 实例。在 React 组件上使用它能以很少的代码量实现一个实时绑定。
在你的项目中创建 react-rebase 的实例：
import Rebase from 'react-rebase'
import firebase from './firebaseConfig'
const RebaseApp = Rebase.createClass({
database: firebase.database()
})
export default RebaseApp这个实例中， database 属性就是我们之前配置好的 firebase 数据库对象。
操作 Firebase 数据库
现在，我们已经成功地将配置好了 react-rebase，可以开始操作 firebase 数据库了。下面是一些常见的操作：
查询
使用 ref 方法查询数据库中的路径：
RebaseApp.ref('users')查询时，你也可以添加查询条件：
RebaseApp.ref('users').orderByChild('name').equalTo('Jack')获取数据
可以使用 on() 方法监听数据更新事件：
RebaseApp.ref('users').on('value', snapshot => {
console.log(snapshot.val())
})在组件销毁时，要取消监听：
RebaseApp.ref('users').off()添加数据
使用 push。将数据推送到指定的路径中，firebase 会自动生成一个唯一 id：
RebaseApp.ref('users').push({
name: 'Jack',
age: 20
})更新数据
使用 update。更新指定路径下的某些属性：
RebaseApp.ref(`users/${id}`).update({
name: 'Peter',
age: 25
})删除数据
使用 remove。从指定路径中删除数据：
RebaseApp.ref(`users/${id}`).remove()与组件结合使用
react-rebase 可以轻松地将 firebase 数据库和 React 组件进行结合，以实现数据的实时更新。为了更好地说明这一点，下面是一个简单的组件示例，它使用 react-rebase。
假设我们要展示所有用户的姓名。首先，在 render() 方法中，在 JSX 中渲染所有用户的名字：
-- -------------------- ---- -------
----- -------- ------- --------------- -
------------------ -
------------
---------- - - ------ -- -
-
------------------- -
-- ----
---------------------------------- -------- -- -
----- ----- - --
------------------------------ -- -
------------ --- ------------------ ---------------------- --
--
--------------- ----- --
--
-
-------- -
------ ------------------------------- -- ---- ---------------------------------------
-
-这段代码的作用是获取 firebase 数据库中的“users”路径下的所有数据，并根据这些数据来渲染组件。
这时，如果在浏览器中打开该组件，打开控制台，在 firebase 中添加或者更改数据，就会发现组件及时响应了这些更改。
总结
使用 react-rebase，可以非常方便地将 firebase 数据库和 React 结合起来，实现数据的实时更新。通过在组件中添加 react-rebase 实例，可以使组件响应数据更新，保持数据和组件的状态一致。然后，通过一些常规操作，比如：查询，获取数据，添加和更新和删除数据，我们可以轻松地操作基本/Firebase 数据库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a1f