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中文網其他相關文章！
