導入

Kbarに出会ったとき、自分のフレーバーで同じものを作ることに魅了されました。

1. Mac の Cmd D または Windows/Linux の Ctrl D を使用してトリガーできるカスタム コマンド パレットを開発しました。

2. このコマンド パレットはポータルとして機能し、ユーザーがアプリケーション内の事前定義された静的ルートに移動できるようにします。

3. Esc キーを使用して閉じることができます。デモンストレーションの目的で、閉じるボタンのあるモーダルを含めました。

4. この記事では、React ポータル、Observable パターン、Window Event Listeners の使用など、このプロジェクトの背後にある主要なコンポーネントと設計上の決定について説明します。

使用される主要なテクノロジーとパターン

1. React ポータル

私。コマンド パレットがルート DOM に干渉しないようにするために、React Portals を使用することにしました。

Ⅱ．ポータルを使用すると、コンポーネントの子を、親コンポーネントの外側の DOM 階層の別の部分にレンダリングできます。

III.これは、コマンド パレットの DOM 構造をアプリケーションの残りの部分から分離し、ルート DOM が影響を受けないようにするために重要でした。

2.観察可能なパターン

私。 Angular の RxJS に似た Observable パターンを実装しました。このパターンを採用した主な理由は、状態管理とイベント処理ロジックをコンポーネント自体から切り離すことでした。

Ⅱ．イベント リスナーをコンポーネント内に直接埋め込み、そこで状態を管理する代わりに、Observable を作成しました。特定の条件が満たされると (キー押下イベントなど)、Observable はメッセージをブロードキャストし、アプリケーションの残りの部分がそれに応じて反応できるようにします。

III.このパターンにより、コードベースのモジュール性と保守性が向上します。

IV.さらに、Observable が不要になったときに適切にサブスクライブ解除されるようにし、メモリ リークの可能性を防ぐことでアプリケーションのパフォーマンスを最適化しました。

3.イベントリスナー

私。ユーザーインタラクションを検出するために、Window Event Listener を利用しました。これらのリスナーは、特定のキーボード ショートカット (Cmd D や Ctrl D など) が押されたときを監視します。

Ⅱ．これらのキー押下を検出すると、関連する条件がチェックされ、満たされた場合、Observable はイベントをブロードキャストします。

Web Workers を使用しない理由は何ですか?

私。なぜ Web Workers を使用しないことにしたのかと疑問に思われるかもしれません。

Ⅱ． Web ワーカーは、メイン スレッドから重い計算タスクをオフロードするのには優れていますが、DOM 関連のイベント リスナーにはあまり適していません。
Ⅲ．このプロジェクトの焦点が DOM イベントを効率的に処理することにあったことを考えると、Observable パターンの方が適切な選択でした。

コラボレーションと次のステップ

私。現在の実装は 軽量で、コードベースは 約 900 バイトです。このプロジェクトをさらに改良したり、npm ライブラリとしてパッケージ化したりすることに興味がある人なら誰とでも協力するつもりです。

Ⅱ．自由にコードを調べて、貢献したい場合はご連絡ください!

*GitHub リンク:- *(https://github.com/Ashutoshsarangi/react-portal)

参照
https://github.com/timc1/kbar?tab=readme-ov-file