反應(yīng)搖滾

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

安裝

要安裝 React-Rock 軟件包，請(qǐng)?jiān)陧?xiàng)目中運(yùn)行以下命令：

npm install react-rock

特征

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

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

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

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

行類(lèi)型解釋

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

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。

方法

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

find 方法的示例

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

npm install react-rock

React 組件中的重新渲染

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

位置類(lèi)型

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

查詢值類(lèi)型

QueryValueType 在WhereType 中使用來(lái)定義可能的查詢條件：

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ù)類(lèi)型

ArgsType 定義用于自定義查詢行為的選項(xiàng)，例如選擇特定行或跳過(guò)行。

類(lèi)組件示例

要在類(lèi)組件中使用存儲(chǔ)，請(qǐng)擴(kuò)展 StoreComponent 類(lèi)：

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
}

在多個(gè)組件中使用存儲(chǔ)的示例

React-Rock 允許您在多個(gè)組件之間共享同一個(gè)存儲(chǔ)，確保整個(gè)應(yīng)用程序的狀態(tài)一致：

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

類(lèi)型說(shuō)明

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

執(zhí)照

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

---

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

？貢獻(xiàn)

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

---

？執(zhí)照

該項(xiàng)目已獲得 MIT 許可。

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