反應(yīng)搖滾

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

安裝

要安裝 React-Rock 軟體包，請(qǐng)?jiān)趯０钢袌?zhí)行以下命令：

npm install react-rock

特徵

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

基本範(fàn)例：建立商店並新增記錄

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

行類型解釋

當(dā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
}

每一行將包含原始資料（Row）和一些附加屬性，如 _id、_index 和 _observe。

方法

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

find 方法的範(fàn)例

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

npm install react-rock

React 元件中的重新渲染

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

位置類型

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

查詢值類型

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

WhereType 的範(fàn)例

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 定義用於自訂查詢行為的選項(xiàng)，例如選擇特定行或跳過行。

類別組件範(fàn)例

要在類別元件中使用存儲(chǔ)，請(qǐng)擴(kuò)充 StoreComponent 類別：

npm install react-rock

增刪改查範(fàn)例

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

尋找和查詢的範(fàn)例

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ǔ)存的範(fàn)例

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

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

類型說明

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

執(zhí)照

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

---

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

？貢獻(xiàn)

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

---

？執(zhí)照

該專案已獲得 MIT 許可。

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