反應搖滾

React-Rock 是一個輕量級包，用於管理 React 應用程式中的全域狀態(tài)。它透過提供包含行和元資料的儲存來簡化資料處理，同時提供執(zhí)行 CRUD 操作等的方法。它可以輕鬆地與 React 元件集成，使其成為管理大型應用程式中複雜狀態(tài)的理想解決方案。

安裝

要安裝 React-Rock 軟體包，請在專案中執(zhí)行以下命令：

npm install react-rock

特徵

• 全域儲存管理：管理全域儲存中的行和元資料。
• CRUD 操作：對行執(zhí)行建立、讀取、更新和刪除操作。
• 元管理：設(shè)定、取得和刪除元資料。
• 最佳化重新渲染：使用凍結(jié)選項控制元件重新渲染。
• 類別元件支援：使用 StoreComponent 將商店資料整合到類別元件中。

基本範例：建立商店並新增記錄

要建立新商店並新增記錄，請使用 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 });

行類型解釋

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

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。

方法

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

find 方法的範例

find 方法可讓您根據(jù)特定條件搜尋商店中的行：

npm install react-rock

React 元件中的重新渲染

React-Rock 透過提供凍結(jié)機制來最佳化重新渲染。當發(fā)生儲存更新並且啟用凍結(jié)選項時，使用 find 或 findFirst 等方法存取儲存的 React 元件將不會自動重新渲染。這使您可以控制元件何時重新渲染，從而提高大型應用程式的效能。

位置類型

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 允許您在多個組件之間共享同一個存儲，確保整個應用程式的狀態(tài)一致：

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

類型說明

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

執(zhí)照

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

---

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

？貢獻

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

---

？執(zhí)照

該專案已獲得 MIT 許可。

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