介紹#
@shined/react-use
是一個對 SSR(服務器渲染)友好、全面且高度優化的 React Hooks 庫,提供了靈活且高效的鉤子解決方案。完全採用 TypeScript 開發,配備了包含豐富示例的互動式文檔 🔥。
主要受到 VueUse 的啟發,同時也吸取了 react-use、ahooks 以及社區內許多其他優秀庫的影響。特別感謝開源社區,尤其是上述庫的作者們,感謝他們的傑出工作和靈感。
🚀 特性#
- 靈活性:特性包括 ElementTarget、Ref Getter、Pausable 等。
- 可搖樹優化:採用 ESM 設計和交付,只導入你需要的內容。
- 互動式文檔:具有現場示例和 Playground。
- 輕量級:自豪地宣布 零依賴。
- 對 SSR 友好:確保所有鉤子與服務器渲染(SSR)兼容。
- 一流的 TypeScript 支持:用 TypeScript 編寫,擁有命名良好的類型定義和 JSDoc 註釋。
全面測試:(即將推出……)
⚡️ 優化#
- 安全狀態:為所有有狀態的鉤子實現了 安全狀態 策略,減少了 bug 和不希望的行為。
- 函數穩定:默認情況下,每個導出函數都受益於 穩定化。
- 最新狀態:通過內部使用 最新 狀態,避免了過期閉包問題。
- 減少不必要的重渲染:使用 Pausable 實例可選地控制某些鉤子的行為。
其他#
技術選型現代化、倉庫配置標準化#
- 主流 pnpm + monorepo 架構,源碼與文檔、示例項目共存
- 使用 .node-version、packageManager 鎖定 Node.js 和包管理器版本
- 使用 tsup 進行源碼構建,由 esbuild 驅動,輕量快速
- 使用 Biome 進行項目 Lint、格式化,基於 Rust 的現代工具
- 使用 Vitest 進行測試,現代化、注重效率、ESM 優先
- 使用 Docusaurus 編寫文檔 + UnoCSS 編寫文檔 Demo
- 配置 GitHub Action,包括 CI (lint)、Release、GitHub Pages 流程規範化
- 配置 npm 的 provenance 發布認證,避免供應鏈攻擊
- 使用 bumpp 進行版本控制,一站式 version bump、tag、commit、push
- 使用 conventional-changelog-cli 自动生成更新日誌(
CHANGELOG.md
) - 使用 changelogithub 規範化發布 (根據提交信息生成和發布 GitHub Release)
- 規範 package.json,包括但不限於 exports、sideEffects、typesVersions 等
- 配置 clean-pkg-json 在發布前執行,確保 package.json 乾淨、規範化
- ...
完善底層、基礎的 Hooks 打好地基,同時為上層特性服務#
- useSafeState => State 行為安全、符合官方倡導,額外支持 deep compare
- useStableFn => Hooks 導出的函數引用穩定,內部的渲染優化之一
- useTargetElement => 統一所有 ElementTarget 參數處理,簡化元素定位
- usePausable => 支持各個 Hook 底層的可暫停特性,可選的內部渲染優化之一
- useSupported => 存在兼容性的 API 的可訪問性狀態的統一化
- useEventListener => 處理各種符合事件接口的實例的事件操作
- useLatest => 通過穩定的 Ref 的應用來避免過期閉包問題
- useEffect 衍生出的一系列 Hooks (create-xxx-effect) 作為底層依賴
- ...