React-Rock 是一个轻量级包，用于管理 React 应用程序中的全局状态。它通过提供包含行和元数据的存储来简化数据处理，同时提供执行 CRUD 操作等的方法。它可以轻松地与 React 组件集成，使其成为管理大型应用程序中复杂状态的理想解决方案。
要安装 React-Rock 软件包，请在项目中运行以下命令：
npm install react-rock
要创建新商店并添加记录，请使用 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 });
当创建一行时，它将具有以下属性：
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）和一些附加属性，如 _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 方法允许您根据特定条件搜索商店中的行：
npm install react-rock
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. |
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 });
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 });
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
}
React-Rock 允许您在多个组件之间共享同一个存储，确保整个应用程序的状态一致：
const foundUsers = users.find({ name: { equalWith: 'John Doe' } });
console.log(foundUsers);
此软件包已根据 MIT 许可证获得许可。
本文档应该提供如何有效使用 React-rock 包的简明概述。
欢迎贡献！请查看贡献指南。
该项目已获得 MIT 许可。
以上是反应摇滚的详细内容。更多信息请关注PHP中文网其他相关文章！
