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

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

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
}

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:

Contoh Kaedah mencari

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

npm install react-rock

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:

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

ArgsType

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

Contoh dengan Komponen Kelas

Untuk menggunakan stor dalam komponen kelas, lanjutkan kelas StoreComponent:

npm install react-rock

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

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
}

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

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.

Lesen

Pakej ini dilesenkan di bawah Lesen MIT.

Dokumentasi ini harus memberikan gambaran keseluruhan ringkas tentang cara menggunakan pakej react-rock dengan berkesan.

? Menyumbang

Sumbangan dialu-alukan! Sila lihat garis panduan sumbangan.

? Lesen

Projek ini dilesenkan di bawah Lesen MIT.

Atas ialah kandungan terperinci React Rock. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!