跳转到内容
View in the app

A better way to browse. Learn more.

彼岸论坛

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

[前端开发] 新开源了一套 React 高质量 Hooks 库,欢迎试用和提建议。

发表于

screenshot

介绍

@shined/react-use 是一个对 SSR (服务端渲染)友好全面高度优化的 React Hooks 库,提供了灵活且高效的钩子解决方案。完全采用 TypeScript 开发,配备了包含丰富示例的交互式文档🔥

主要受到 VueUse 的启发,同时也吸取了 react-useahooks 以及社区内许多其他优秀库的影响。特别感谢开源社区,尤其是上述库的作者们,感谢他们的杰出工作和灵感。

🚀 特性

  • 灵活性:特性包括 ElementTargetRef GetterPausable 等。
  • 可摇树优化:采用 ESM 设计和交付,只导入你需要的内容。
  • 交互式文档:具有现场示例和 Playground
  • 轻量级:自豪地宣布 零依赖
  • 对 SSR 友好:确保所有钩子与服务端渲染( SSR )兼容。
  • 一流的 TypeScript 支持:用 TypeScript 编写,拥有命名良好的类型定义和 JSDoc 注释。
  • **全面测试**:(即将推出……)

️ 优化

  • 安全状态:为所有有状态的钩子实现了 安全状态 策略,减少了 bug 和不希望的行为。
  • 函数稳定:默认情况下,每个导出函数都受益于 稳定化
  • 最新状态:通过内部使用 最新 状态,避免了过期闭包问题。
  • 减少不必要的重渲染:使用 Pausable 实例可选地控制某些钩子的行为。

其他

技术选型现代化、仓库配置标准化

  1. 主流 pnpm + monorepo 架构,源码与文档、示例项目共存
  2. 使用 .node-version 、packageManager 锁定 Node.js 和包管理器版本
  3. 使用 tsup 进行源码构建,由 esbuild 驱动,轻量快速
  4. 使用 Biome 进行项目 Lint 、格式化,基于 Rust 的现代工具
  5. 使用 Vitest 进行测试,现代化、注重效率、ESM 优先
  6. 使用 Docusaurus 编写文档 + UnoCSS 编写文档 Demo
  7. 配置 GitHub Action ,包括 CI (lint)、Release 、GitHub Pages 流程规范化
  8. 配置 npm 的 provenance 发布认证,避免供应链攻击
  9. 使用 bumpp 进行版本控制,一站式 version bump 、tag 、commit 、push
  10. 使用 conventional-changelog-cli 自动生成更新日志(CHANGELOG.md
  11. 使用 changelogithub 规范化发布 (根据提交信息生成和发布 GitHub Release )
  12. 规范 package.json ,包括但不限于 exports 、sideEffects 、typesVersions 等
  13. 配置 clean-pkg-json 在发布前执行,确保 package.json 干净、规范化
  14. ...

完善底层、基础的 Hooks 打好地基,同时为上层特性服务

  1. useSafeState => State 行为安全、符合官方倡导,额外支持 deep compare
  2. useStableFn => Hooks 导出的函数引用稳定,内部的渲染优化之一
  3. useTargetElement => 统一所有 ElementTarget 参数处理,简化元素定位
  4. usePausable => 支持各个 Hook 底层的可暂停特性,可选的内部渲染优化之一
  5. useSupported => 存在兼容性的 API 的可访问性状态的统一化
  6. useEventListener => 处理各种符合事件接口的实例的事件操作
  7. useLatest => 通过稳定的 Ref 的应用来避免过期闭包问题
  8. useEffect 衍生出的一系列 Hooks (create-xxx-effect) 作为底层依赖
  9. ...

相关链接

Featured Replies

No posts to show

创建帐户或登录来提出意见

Account

导航

搜索

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.