紹介#
@shined/react-useは、SSR（サーバーサイドレンダリング）に対応し、包括的かつ高度に最適化された React Hooks ライブラリであり、柔軟で効率的なフックソリューションを提供します。完全にTypeScriptで開発され、対話的なドキュメントには豊富な例が含まれています🔥。
VueUseからの影響を受けつつ、react-use、ahooks、および他の多くの優れたライブラリからも影響を受けました。オープンソースコミュニティ、特に上記のライブラリの作者に感謝します。彼らの優れた仕事とインスピレーションに感謝します。
🚀 特徴#
- 柔軟性：ElementTarget、Ref Getter、Pausableなどの特徴があります。
- トリミング最適化：ESMを使用した設計とデリバリーで、必要なコンテンツのみをインポートします。
- 対話的なドキュメント：ライブな例とPlaygroundを備えています。
- 軽量：依存関係なしであることを自負しています。
- SSR に対応：すべてのフックがサーバーサイドレンダリング（SSR）と互換性があることを保証します。
- 一流の TypeScript サポート：TypeScriptで記述され、名前付きの型定義とJSDocコメントを備えています。
包括的なテスト：（近日公開予定...）
⚡️ 最適化#
- 安全な状態：すべての状態フックに対して安全な状態戦略を実装し、バグや望ましくない動作を減らしました。
- 関数の安定性：デフォルトでは、エクスポートされるすべての関数は安定化の恩恵を受けます。
- 最新の状態：内部的に最新の状態を使用することで、古いクロージャの問題を回避します。
- 不要な再レンダリングの削減：Pausableインスタンスを使用して、特定のフックの動作をオプションで制御できます。
その他#
モダンな技術選択、リポジトリの標準化設定#
- 主流の pnpm + monorepo アーキテクチャ、ソースコードとドキュメント、サンプルプロジェクトを共存させる
- .node-version、packageManager を使用して Node.js とパッケージマネージャのバージョンを固定する
- ソースコードのビルドには tsup を使用し、esbuild で駆動し、軽量で高速なビルドを実現する
- Rust ベースのモダンツールである Biome を使用してプロジェクトの Lint、フォーマットを行う
- テストには効率的でモダンな Vitest を使用し、ESM を優先する
- ドキュメントには Docusaurus を使用し、ドキュメントデモには UnoCSS を使用する
- GitHub Action を設定し、CI（lint）、リリース、GitHub Pages のプロセスを標準化する
- npm の provenance パブリッシュ認証を設定し、サプライチェーン攻撃を防ぐ
- バージョン管理には bumpp を使用し、バージョンの増加、タグ、コミット、プッシュを一括で行う
- conventional-changelog-cli を使用して更新ログ（
CHANGELOG.md）を自動生成する - changelogithub を使用してリリースを標準化する（コミットメッセージに基づいて GitHub リリースを生成および公開する）
- package.json を規格化し、exports、sideEffects、typesVersions などを含む
- パッケージのリリース前に clean-pkg-json を実行して、package.json がクリーンで規格化されていることを確認する
- ...
基礎的な Hooks を充実させ、上位の機能にサービスを提供する#
- useSafeState => 状態フックの安全性を実現し、ディープコンペアをサポートします
- useStableFn => Hooks からエクスポートされる関数の参照が安定し、内部のレンダリング最適化の一部です
- useTargetElement => すべての ElementTarget パラメータの処理を統一し、要素の位置指定を簡素化します
- usePausable => 各フックの内部レンダリング最適化の一部として、一部のフックの動作を一時停止できます
- useSupported => 互換性のある API のアクセシビリティステータスの統一
- useEventListener => 各種のイベントインターフェースを持つインスタンスのイベント操作を処理します
- useLatest => 古いクロージャの問題を回避するために安定した Ref を使用します
- useEffect から派生した一連の Hooks（create-xxx-effect）は、基礎的な依存関係として使用されます
- ...