反應搖滾

反應搖滾

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 });

行類型解釋

當建立一行時，它將具有以下屬性：

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 方法的範例

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 });

參數類型

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);

類型說明

• RowType：表示帶有 _id、_index 和 _observe 以及使用者定義的資料欄位的記錄。
• ArgsType：定義彈性查詢行的選項，例如跳過、取得和自訂行處理。
• WhereType：表示查詢記錄的條件，使用contain、equalWith等字段，以及gt、lt等範圍查詢
• QueryValueType：指定根據欄位值過濾行所允許的條件類型。

執照

此軟體包已根據 MIT 許可證獲得許可。

---

本文檔應該提供如何有效使用 React-rock 套件的簡明概述。

？貢獻

歡迎貢獻！請查看貢獻指南。

---

？執照

該專案已獲得 MIT 許可。

以上是反應搖滾的詳細內容。更多資訊請關注PHP中文網其他相關文章！