Rock reagieren

React Rock

React-Rock ist ein leichtgewichtiges Paket zur Verwaltung des globalen Status in React-Anwendungen. Es vereinfacht den Umgang mit Daten, indem es einen Speicher mit Zeilen und Metadaten bereitstellt und gleichzeitig Methoden zur Durchführung von CRUD-Operationen und mehr bietet. Es ermöglicht eine einfache Integration mit React-Komponenten und ist somit eine ideale Lösung für die Verwaltung komplexer Zustände in großen Anwendungen.

Installation

Um das React-Rock-Paket zu installieren, führen Sie den folgenden Befehl in Ihrem Projekt aus:

npm install react-rock

Merkmale

• Globale Store-Verwaltung: Zeilen und Metadaten in einem globalen Store verwalten.
• CRUD-Operationen: Führt Erstellungs-, Lese-, Aktualisierungs- und Löschvorgänge für Zeilen durch.
• Meta-Management: Metadaten festlegen, abrufen und löschen.
• Optimiertes erneutes Rendern: Steuern Sie das erneute Rendern von Komponenten mit der Einfrieroption.
• Klassenkomponentenunterstützung: Verwenden Sie StoreComponent zum Integrieren von Geschäftsdaten in Klassenkomponenten.

Einfaches Beispiel: Erstellen eines Shops und Hinzufügen von Datensätzen

Um einen neuen Shop zu erstellen und einen Datensatz hinzuzufügen, verwenden Sie die Funktion „createStore“. Hier ist ein Beispiel:

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

RowType erklärt

Wenn eine Zeile erstellt wird, hat sie die folgenden Eigenschaften:

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
}

Jede Zeile enthält die Originaldaten (Zeile) und einige zusätzliche Eigenschaften wie _id, _index und _observe.

Methoden

Hier ist eine Tabelle mit allen verfügbaren Methoden und ihren Beschreibungen:

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.

Beispiel für die find-Methode

Mit der Suchmethode können Sie basierend auf bestimmten Bedingungen nach Zeilen im Geschäft suchen:

npm install react-rock

Neu-Rendering in React Components

React-Rock optimiert das erneute Rendern, indem es einen Einfriermechanismus bietet. Wenn eine Store-Aktualisierung erfolgt und die Freeze-Option aktiviert ist, werden React-Komponenten, die mit Methoden wie find oder findFirst auf den Store zugreifen, nicht automatisch neu gerendert. Dadurch haben Sie die Kontrolle darüber, wann Ihre Komponenten neu gerendert werden sollen, und verbessern so die Leistung in großen Anwendungen.

WhereType

Der WhereType wird verwendet, um Bedingungen beim Abfragen von Zeilen anzugeben. Es definiert eine Abfragestruktur zum Filtern von Zeilen.

QueryValueType

Der QueryValueType wird innerhalb von WhereType verwendet, um mögliche Bedingungen für die Abfrage zu definieren:

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.

Beispiel für 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

ArgsType definiert Optionen zum Anpassen des Abfrageverhaltens, z. B. das Auswählen bestimmter Zeilen oder das Überspringen von Zeilen.

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.

Beispiel mit Klassenkomponente

Um den Store in einer Klassenkomponente zu verwenden, erweitern Sie die StoreComponent-Klasse:

npm install react-rock

CRUD-Beispiel

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

Beispiele mit find und Query

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
}

Beispiel für die Verwendung des Stores in mehreren Komponenten

React-Rock ermöglicht es Ihnen, denselben Store über mehrere Komponenten hinweg zu teilen und so einen konsistenten Zustand in der gesamten App sicherzustellen:

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

Erklärung der Typen

• RowType: Stellt einen Datensatz mit _id, _index und _observe zusammen mit benutzerdefinierten Datenfeldern dar.
• ArgsType: Definiert die Optionen zum Abfragen von Zeilen mit Flexibilität wie Überspringen, Übernehmen und benutzerdefinierter Zeilenverarbeitung.
• WhereType: Stellt die Bedingungen für die Abfrage von Datensätzen dar, wobei Felder wie „contain“, „equalWith“ und Bereichsabfragen wie „gt“, „lt“ usw. verwendet werden.
• QueryValueType: Gibt die zulässigen Bedingungstypen zum Filtern von Zeilen basierend auf Feldwerten an.

Lizenz

Dieses Paket ist unter der MIT-Lizenz lizenziert.

---

Diese Dokumentation soll einen kurzen Überblick über die effektive Nutzung des React-Rock-Pakets geben.

? Mitwirken

Beiträge sind willkommen! Bitte beachten Sie die Beitragsrichtlinien.

---

? Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert.

Das obige ist der detaillierte Inhalt vonRock reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!