反应摇滚

反应摇滚

React-Rock 是一个轻量级包，用于管理 React 应用程序中的全局状态。它通过提供包含行和元数据的存储来简化数据处理，同时提供执行 CRUD 操作等的方法。它可以轻松地与 React 组件集成，使其成为管理大型应用程序中复杂状态的理想解决方案。

安装

要安装 React-Rock 软件包，请在项目中运行以下命令：

npm install react-rock

特征

• 全局存储管理：管理全局存储中的行和元数据。
• CRUD 操作：对行执行创建、读取、更新和删除操作。
• 元管理：设置、获取和删除元数据。
• 优化重新渲染：使用冻结选项控制组件重新渲染。
• 类组件支持：使用 StoreComponent 将商店数据集成到类组件中。

基本示例：创建商店并添加记录

要创建新商店并添加记录，请使用 createStore 函数。这是一个例子：

import { createStore } from 'react-rock';

// Define RowType and MetaType
type RowType = { name: string, age: number };
type MetaType = { totalRecords: number };

// Create a store
const users = createStore<rowtype metatype>({ name: '', age: 0 }, { totalRecords: 0 });

// Add a new row to the store
users.create({ name: 'John Doe', age: 30 });
</rowtype>

行类型解释

当创建一行时，它将具有以下属性：

type RowType<row> = Row & {
    _id: string;       // Unique identifier for the row
    _index: number;    // Index of the row in the store
    _observe: number;  // Internal property to track changes
}
</row>

每一行将包含原始数据（Row）和一些附加属性，如 _id、_index 和 _observe。

方法

这是一个包含所有可用方法及其描述的表格：

Method	Description
create(row, freeze?)	Adds a new record to the store. Optionally, prevents re-rendering if freeze is true.
createMany(rows, freeze?)	Adds multiple records to the store. Optionally, prevents re-rendering if freeze is true.
update(row, where, freeze?)	Updates records based on the condition specified in where.
updateAll(row, freeze?)	Updates all records in the store. Optionally, prevents re-rendering if freeze is true.
delete(where, freeze?)	Deletes records based on the condition specified in where.
move(oldIdx, newIdx, freeze?)	Moves a record from one index to another.
clearAll(freeze?)	Clears all records from the store. Optionally, prevents re-rendering if freeze is true.
getAll(args?)	Retrieves all rows from the store.
find(where, args?)	Finds rows based on a condition specified in where.
findFirst(where, freeze?)	Finds the first row that matches the condition in where.
findById(_id, freeze?)	Finds a row by its _id.
setMeta(key, value, freeze?)	Sets a value for a specific meta key.
getMeta(key, freeze?)	Retrieves the value of a specific meta key.
getAllMeta(freeze?)	Retrieves all meta data from the store.
deleteMeta(key, freeze?)	Deletes a specific meta key.
clearMeta(freeze?)	Clears all meta data from the store.

find 方法的示例

find 方法允许您根据特定条件搜索商店中的行：

npm install react-rock

React 组件中的重新渲染

React-Rock 通过提供冻结机制来优化重新渲染。当发生存储更新并且启用冻结选项时，使用 find 或 findFirst 等方法访问存储的 React 组件将不会自动重新渲染。这使您可以控制组件何时重新渲染，从而提高大型应用程序的性能。

位置类型

WhereType 用于指定查询行时的条件。它定义了用于过滤行的查询结构。

查询值类型

QueryValueType 在WhereType 中使用来定义可能的查询条件：

Property	Description
contain	Finds values containing the specified string, number, or boolean.
startWith	Finds values that start with the specified string or number.
endWith	Finds values that end with the specified string or number.
equalWith	Finds values that are exactly equal to the specified value.
notEqualWith	Finds values that are not equal to the specified value.
gt	Finds values greater than the specified number.
lt	Finds values less than the specified number.
gte	Finds values greater than or equal to the specified number.
lte	Finds values less than or equal to the specified number.

WhereType 的示例

import { createStore } from 'react-rock';

// Define RowType and MetaType
type RowType = { name: string, age: number };
type MetaType = { totalRecords: number };

// Create a store
const users = createStore<rowtype metatype>({ name: '', age: 0 }, { totalRecords: 0 });

// Add a new row to the store
users.create({ name: 'John Doe', age: 30 });
</rowtype>

参数类型

ArgsType 定义用于自定义查询行为的选项，例如选择特定行或跳过行。

Property	Description
getRow	Custom function to process rows before returning them.
skip	Number of rows to skip.
take	Number of rows to return.
freeze	If true, prevents re-rendering when accessing the data.

类组件示例

要在类组件中使用存储，请扩展 StoreComponent 类：

npm install react-rock

增删改查示例

import { createStore } from 'react-rock';

// Define RowType and MetaType
type RowType = { name: string, age: number };
type MetaType = { totalRecords: number };

// Create a store
const users = createStore<rowtype metatype>({ name: '', age: 0 }, { totalRecords: 0 });

// Add a new row to the store
users.create({ name: 'John Doe', age: 30 });
</rowtype>

查找和查询的示例

type RowType<row> = Row & {
    _id: string;       // Unique identifier for the row
    _index: number;    // Index of the row in the store
    _observe: number;  // Internal property to track changes
}
</row>

在多个组件中使用存储的示例

React-Rock 允许您在多个组件之间共享同一个存储，确保整个应用程序的状态一致：

const foundUsers = users.find({ name: { equalWith: 'John Doe' } });
console.log(foundUsers);

类型说明

• RowType：表示带有 _id、_index 和 _observe 以及用户定义的数据字段的记录。
• ArgsType：定义灵活查询行的选项，例如跳过、获取和自定义行处理。
• WhereType：表示查询记录的条件，使用contain、equalWith等字段，以及gt、lt等范围查询
• QueryValueType：指定根据字段值过滤行所允许的条件类型。

执照

此软件包已根据 MIT 许可证获得许可。

---

本文档应该提供如何有效使用 React-rock 包的简明概述。

？贡献

欢迎贡献！请查看贡献指南。

---

？执照

该项目已获得 MIT 许可。

以上是反应摇滚的详细内容。更多信息请关注PHP中文网其他相关文章！