反應(yīng)搖滾

React-Rock 是一個輕量級包，用于管理 React 應(yīng)用程序中的全局狀態(tài)。它通過提供包含行和元數(shù)據(jù)的存儲來簡化數(shù)據(jù)處理，同時提供執(zhí)行 CRUD 操作等的方法。它可以輕松地與 React 組件集成，使其成為管理大型應(yīng)用程序中復(fù)雜狀態(tài)的理想解決方案。

安裝

要安裝 React-Rock 軟件包，請在項目中運行以下命令：

npm install react-rock

特征

• 全局存儲管理：管理全局存儲中的行和元數(shù)據(jù)。
• CRUD 操作：對行執(zhí)行創(chuàng)建、讀取、更新和刪除操作。
• 元管理：設(shè)置、獲取和刪除元數(shù)據(jù)。
• 優(yōu)化重新渲染：使用凍結(jié)選項控制組件重新渲染。
• 類組件支持：使用 StoreComponent 將商店數(shù)據(jù)集成到類組件中。

基本示例：創(chuàng)建商店并添加記錄

要創(chuàng)建新商店并添加記錄，請使用 createStore 函數(shù)。這是一個例子：

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

行類型解釋

當(dāng)創(chuàng)建一行時，它將具有以下屬性：

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
}

每一行將包含原始數(shù)據(jù)（Row）和一些附加屬性，如 _id、_index 和 _observe。

方法

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

find 方法的示例

find 方法允許您根據(jù)特定條件搜索商店中的行：

npm install react-rock

React 組件中的重新渲染

React-Rock 通過提供凍結(jié)機制來優(yōu)化重新渲染。當(dāng)發(fā)生存儲更新并且啟用凍結(jié)選項時，使用 find 或 findFirst 等方法訪問存儲的 React 組件將不會自動重新渲染。這使您可以控制組件何時重新渲染，從而提高大型應(yīng)用程序的性能。

位置類型

WhereType 用于指定查詢行時的條件。它定義了用于過濾行的查詢結(jié)構(gòu)。

查詢值類型

QueryValueType 在WhereType 中使用來定義可能的查詢條件：

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

參數(shù)類型

ArgsType 定義用于自定義查詢行為的選項，例如選擇特定行或跳過行。

類組件示例

要在類組件中使用存儲，請擴展 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 允許您在多個組件之間共享同一個存儲，確保整個應(yīng)用程序的狀態(tài)一致：

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

類型說明

• RowType：表示帶有 _id、_index 和 _observe 以及用戶定義的數(shù)據(jù)字段的記錄。
• ArgsType：定義靈活查詢行的選項，例如跳過、獲取和自定義行處理。
• WhereType：表示查詢記錄的條件，使用contain、equalWith等字段，以及gt、lt等范圍查詢
• QueryValueType：指定根據(jù)字段值過濾行所允許的條件類型。

執(zhí)照

此軟件包已根據(jù) MIT 許可證獲得許可。

---

本文檔應(yīng)該提供如何有效使用 React-rock 包的簡明概述。

？貢獻(xiàn)

歡迎貢獻(xiàn)！請查看貢獻(xiàn)指南。

---

？執(zhí)照

該項目已獲得 MIT 許可。

以上是反應(yīng)搖滾的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！