리액트 락

리액트락

React-Rock은 React 애플리케이션에서 전역 상태를 관리하기 위한 경량 패키지입니다. 행과 메타데이터가 포함된 저장소를 제공하고 CRUD 작업 등을 수행하는 방법을 제공하여 데이터 처리를 단순화합니다. React 구성요소와 쉽게 통합할 수 있어 대규모 애플리케이션에서 복잡한 상태를 관리하는 데 이상적인 솔루션입니다.

설치

React-Rock 패키지를 설치하려면 프로젝트에서 다음 명령을 실행하세요.

npm install react-rock

특징

• 글로벌 매장 관리: 글로벌 매장의 행과 메타데이터를 관리합니다.
• CRUD 작업: 행에 대한 생성, 읽기, 업데이트 및 삭제 작업을 수행합니다.
• 메타 관리: 메타데이터를 설정, 가져오기, 삭제합니다.
• 최적화된 재렌더링: 고정 옵션을 사용하여 제어 구성요소를 다시 렌더링합니다.
• 클래스 구성요소 지원: 스토어 데이터를 클래스 구성요소에 통합하려면 StoreComponent를 사용하세요.

기본 예: 매장 생성 및 레코드 추가

새 매장을 만들고 레코드를 추가하려면 createStore 기능을 사용하세요. 예는 다음과 같습니다.

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 설명

행이 생성되면 다음 속성을 갖게 됩니다.

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
}

각 행에는 원본 데이터(행)와 _id, _index 및 _observe와 같은 일부 추가 속성이 포함됩니다.

행동 양식

사용 가능한 모든 방법과 설명이 포함된 표는 다음과 같습니다.

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.

find 메소드의 예

find 메소드를 사용하면 특정 조건에 따라 스토어의 행을 검색할 수 있습니다.

npm install react-rock

React 구성 요소에서 다시 렌더링

React-Rock은 고정 메커니즘을 제공하여 다시 렌더링을 최적화합니다. 스토어 업데이트가 발생하고 고정 옵션이 활성화되면 find 또는 findFirst와 같은 메서드를 사용하여 스토어에 액세스하는 React 구성 요소가 자동으로 다시 렌더링되지 않습니다. 이를 통해 구성 요소를 다시 렌더링해야 하는 시기를 제어할 수 있어 대규모 애플리케이션의 성능이 향상됩니다.

WhereType

WhereType은 행을 쿼리할 때 조건을 지정하는 데 사용됩니다. 행 필터링을 위한 쿼리 구조를 정의합니다.

쿼리값 유형

QueryValueType은 WhereType 내에서 쿼리 가능한 조건을 정의하는 데 사용됩니다.

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.

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은 특정 행 선택, 행 건너뛰기 등 쿼리 동작을 사용자 정의하기 위한 옵션을 정의합니다.

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.

클래스 구성요소의 예

클래스 구성 요소에서 저장소를 사용하려면 StoreComponent 클래스를 확장하세요.

npm install react-rock

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

찾기 및 쿼리의 예

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
}

여러 구성 요소에서 저장소를 사용하는 예

React-Rock을 사용하면 여러 구성 요소에서 동일한 저장소를 공유하여 앱 전체에서 일관된 상태를 보장할 수 있습니다.

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

유형 설명

• RowType: 사용자 정의 데이터 필드와 함께 _id, _index 및 _observe가 있는 레코드를 나타냅니다.
• ArgsType: 건너뛰기, 가져오기, 사용자 지정 행 처리 등 유연한 행 쿼리 옵션을 정의합니다.
• WhereType: contain,equalWith와 같은 필드와 gt, lt 등과 같은 범위 쿼리를 사용하여 레코드를 쿼리하기 위한 조건을 나타냅니다.
• QueryValueType: 필드 값을 기준으로 행을 필터링하는 데 허용되는 조건 유형을 지정합니다.

특허

이 패키지는 MIT 라이선스에 따라 라이선스가 부여됩니다.

---

이 문서는 React-Rock 패키지를 효과적으로 사용하는 방법에 대한 간결한 개요를 제공해야 합니다.

? 기여

기여를 환영합니다! 기여 가이드라인을 확인해주세요.

---

? 특허

이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다.

위 내용은 리액트 락의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!