検索

React Rock

リアクトロック

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>

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
}
</row>

各行には、元のデータ (行) と、_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 });
</rowtype>

引数の種類

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

find と 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
}
</row>

複数のコンポーネントでのストアの使用例

React-Rock を使用すると、複数のコンポーネント間で同じストアを共有し、アプリ全体で一貫した状態を確保できます。

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

種類の説明

  • RowType: _id、_index、および _observe とユーザー定義のデータ フィールドを持つレコードを表します。
  • ArgsType: スキップ、取得、カスタム行処理などの柔軟な行クエリのオプションを定義します。
  • WhereType: contains、equalWith などのフィールド、および gt、lt などの範囲クエリを使用して、レコードをクエリするための条件を表します。
  • QueryValueType: フィールド値に基づいて行をフィルター処理するために許可される条件タイプを指定します。

ライセンス

このパッケージは MIT ライセンスに基づいてライセンスされています。


このドキュメントでは、react-rock パッケージを効果的に使用する方法の簡潔な概要を提供します。

?貢献する

貢献は大歓迎です!投稿ガイドラインをご確認ください。


?ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています。

以上がリアクトロックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません