React Rock-tutorial js-php.cn

React Rock

React-Rock ialah pakej ringan untuk mengurus keadaan global dalam aplikasi React. Ia memudahkan pengendalian data dengan menyediakan kedai dengan baris dan metadata, sambil menawarkan kaedah untuk melaksanakan operasi CRUD dan banyak lagi. Ia membolehkan penyepaduan mudah dengan komponen React, menjadikannya penyelesaian ideal untuk mengurus keadaan kompleks dalam aplikasi besar.

Pemasangan

Untuk memasang pakej React-Rock, jalankan arahan berikut dalam projek anda:

npm install react-rock

Salin selepas log masuk

Ciri-ciri

Pengurusan Kedai Global: Urus baris dan data meta dalam kedai global.
Operasi CRUD: Laksanakan operasi cipta, baca, kemas kini dan padam pada baris.
Pengurusan Meta: Tetapkan, dapatkan dan padamkan data meta.
Paparan Semula Dioptimumkan: Paparan semula komponen kawalan dengan pilihan pegun.
Sokongan Komponen Kelas: Gunakan StoreComponent untuk menyepadukan data stor ke dalam komponen kelas.

Contoh Asas: Mencipta Stor dan Menambah Rekod

Untuk mencipta kedai baharu dan menambah rekod, gunakan fungsi createStore. Berikut ialah contoh:

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

Salin selepas log masuk

RowType Diterangkan

Apabila baris dibuat, ia akan mempunyai sifat berikut:

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
}

Salin selepas log masuk

Setiap baris akan menyertakan data asal (Baris) dan beberapa sifat tambahan seperti _id, _index dan _observe.

Kaedah

Berikut ialah jadual dengan semua kaedah yang tersedia dan penerangannya:

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.

Contoh Kaedah mencari

Kaedah cari membolehkan anda mencari baris dalam kedai berdasarkan syarat tertentu:

npm install react-rock

Salin selepas log masuk

Paparan semula dalam Komponen React

React-Rock mengoptimumkan pemaparan semula dengan menawarkan mekanisme pembekuan. Apabila kemas kini kedai berlaku dan pilihan pegun didayakan, komponen React yang mengakses kedai menggunakan kaedah seperti find atau findFirst tidak akan dipaparkan semula secara automatik. Ini memberi anda kawalan ke atas masa komponen anda perlu dipaparkan semula, meningkatkan prestasi dalam aplikasi besar.

WhereType

The WhereType digunakan untuk menentukan keadaan semasa menanyakan baris. Ia mentakrifkan struktur pertanyaan untuk menapis baris.

QueryValueType

QueryValueType digunakan dalam WhereType untuk mentakrifkan keadaan yang mungkin untuk membuat pertanyaan:

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.

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

Salin selepas log masuk

ArgsType

ArgsType mentakrifkan pilihan untuk menyesuaikan tingkah laku pertanyaan, seperti memilih baris tertentu atau melangkau baris.

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.

Contoh dengan Komponen Kelas

Untuk menggunakan stor dalam komponen kelas, lanjutkan kelas StoreComponent:

npm install react-rock

Salin selepas log masuk

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

Salin selepas log masuk

Contoh dengan cari dan Pertanyaan

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
}

Salin selepas log masuk

Contoh Penggunaan Stor dalam Berbilang Komponen

React-Rock membolehkan anda berkongsi kedai yang sama merentas berbilang komponen, memastikan keadaan yang konsisten di seluruh apl:

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

Salin selepas log masuk

Penjelasan Jenis

RowType: Mewakili rekod dengan _id, _index dan _observe bersama dengan medan data yang ditentukan pengguna.
ArgsType: Mentakrifkan pilihan untuk menanyakan baris dengan fleksibiliti seperti melangkau, mengambil dan pemprosesan baris tersuai.
WhereType: Mewakili syarat untuk menyoal rekod, menggunakan medan seperti contain, equalWith dan pertanyaan julat seperti gt, lt, dsb.
QueryValueType: Menentukan jenis keadaan yang dibenarkan untuk menapis baris berdasarkan nilai medan.