Réagir à la roche-js tutoriel-php.cn

React Rock

Réagissez Rock

React-Rock est un package léger pour gérer l'état global dans les applications React. Il simplifie la gestion des données en fournissant un magasin de lignes et de métadonnées, tout en proposant des méthodes pour effectuer des opérations CRUD et bien plus encore. Il permet une intégration facile avec les composants React, ce qui en fait une solution idéale pour gérer des états complexes dans de grandes applications.

Installation

Pour installer le package React-Rock, exécutez la commande suivante dans votre projet :

npm install react-rock

Copier après la connexion

Caractéristiques

Gestion globale de la boutique : gérez les lignes et les métadonnées dans une boutique globale.
Opérations CRUD : effectuez des opérations de création, de lecture, de mise à jour et de suppression sur les lignes.
Gestion des métadonnées : définissez, obtenez et supprimez des métadonnées.
Rerendus optimisés : contrôlez les rerendus des composants avec l'option de gel.
Prise en charge des composants de classe : utilisez StoreComponent pour intégrer les données du magasin dans les composants de classe.

Exemple de base : création d'un magasin et ajout d'enregistrements

Pour créer une nouvelle boutique et ajouter un enregistrement, utilisez la fonction createStore. Voici un exemple :

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

Copier après la connexion

Type de ligne expliqué

Lorsqu'une ligne est créée, elle aura les propriétés suivantes :

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
}

Copier après la connexion

Chaque ligne comprendra les données d'origine (Row) et quelques propriétés supplémentaires telles que _id, _index et _observe.

Méthodes

Voici un tableau avec toutes les méthodes disponibles et leurs descriptions :

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.

Exemple de la méthode find

La méthode find vous permet de rechercher des lignes dans le magasin en fonction de conditions spécifiques :

npm install react-rock

Copier après la connexion

Re-rendu dans les composants React

React-Rock optimise les re-rendus en proposant un mécanisme de gel. Lorsqu'une mise à jour du magasin se produit et que l'option de gel est activée, les composants React qui accèdent au magasin à l'aide de méthodes telles que find ou findFirst ne seront pas automatiquement restitués. Cela vous permet de contrôler le moment où vos composants doivent être restitués, améliorant ainsi les performances dans les applications volumineuses.

OùType

Le WhereType est utilisé pour spécifier des conditions lors de l'interrogation des lignes. Il définit une structure de requête pour filtrer les lignes.

TypeValeurRequête

Le QueryValueType est utilisé dans WhereType pour définir les conditions possibles d'interrogation :

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.

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

Copier après la connexion

TypeArgs

ArgsType définit des options pour personnaliser le comportement des requêtes, telles que la sélection de lignes spécifiques ou le saut de lignes.

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.

Exemple avec un composant de classe

Pour utiliser le store dans un composant de classe, étendez la classe StoreComponent :

npm install react-rock

Copier après la connexion

Exemple CRUD

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

Copier après la connexion

Exemples avec find et 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
}

Copier après la connexion

Exemple d'utilisation du Store dans plusieurs composants

React-Rock vous permet de partager le même magasin sur plusieurs composants, garantissant ainsi un état cohérent dans toute l'application :

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

Copier après la connexion

Explication des types

RowType : représente un enregistrement avec un _id, _index et _observe ainsi que des champs de données définis par l'utilisateur.
ArgsType : définit les options d'interrogation des lignes avec flexibilité, telles que le saut, la prise et le traitement personnalisé des lignes.
WhereType : représente les conditions d'interrogation des enregistrements, en utilisant des champs tels que contain, égalAvec et des requêtes de plage comme gt, lt, etc.
QueryValueType : spécifie les types de conditions autorisés pour filtrer les lignes en fonction des valeurs de champ.