在过去的几年里,我深度参与了区块链项目,而 React 经常是我首选的库。React 在架构上非常适合这些项目,特别是因为许多区块链应用共享类似的模式,比如发送交易、读取智能合约数据以及保持 UI 与链上信息同步。虽然现有的 web3 库很有帮助,但我经常发现自己为每个新的 dApp 重新实现相同的样板代码。这包括请求和响应的类型定义、缓存键管理、轮询与订阅的处理、切换链以及错误处理。这种重复工作很快就让人厌倦,我真的想要一个轻量且灵活的库,不会将我绑定到特定的提供者或 SDK 堆栈。因此,我创建了 Web3-Hooks。\n\nWeb3-Hooks 设计为一个模块化的 React hooks 库,专注于 Web3,明确分离关注点。你可以自由替换传输和提供者——无论是 Viem、Ethers,甚至是自定义的 JSON-RPC 设置——而无需更改你的 React 组件。这种分离使你的代码库能够扩展,而不会将组件耦合到特定的区块链 SDK。核心理念是让你摆脱将钱包连接器、传输层和 React 状态管理捆绑在一起的解决方案。这些一体化库在你想要开箱即用时很好,但如果你的团队需要混合使用 Alchemy、Infura 或自托管节点等 RPC 提供者,添加重试或追踪中间件,或计划支持非 EVM 区块链时,它们可能会带来麻烦。\n\n可预测性和类型安全是另两个关键目标。对于 dApp 中的读取操作,TanStack Query(前身为 React Query)非常合适,因为它处理缓存键、过期数据策略、服务端渲染感知和去重,避免不必要的网络调用。Web3-Hooks 保持端到端的强类型——从 JSON-RPC 请求到 hook 签名和响应——这有助于避免未知十六进制数据或不匹配的问题,尤其是在处理 BigInt 和 0x 前缀格式时。\n\n在架构上,Web3-Hooks 由三层组成:核心层、适配器层和 React 层。核心层(@web3-hooks/core)是框架无关的,仅定义 Web3Client 接口、请求/响应格式和确定性查询键的工具。它不关心 React 或传输细节——只关心与区块链通信的协议。然后是 EVM 适配器(@web3-hooks/adapter-evm-viem),它连接核心与 Viem 的客户端,规范化数据格式,同时提供 EVM 特定的操作,如获取链 ID 或余额。你可以用其他适配器替换它,比如 Ethers 或 Solana,而无需触及你的 React 代码。最后,React 层(@web3-hooks/react)提供 React hooks,如 useBlockNumber 和 useBalance,以及注入客户端到 React 上下文的 Web3Provider。它内部使用 TanStack Query 来管理缓存、重新获取和乐观 UI 更新。\n\n设计原则强调小而专注的接口、可预测且稳定的缓存键、零 UI 假设(让你选择自己的设计系统),以及在需要时可以降级到原始 RPC 调用的逃生舱。入门非常简单,尤其是对于 EVM 链,有预设的包将一切连接起来。在底层,hooks 构建稳定的查询键并使用 React Query 管理缓存和去重。请求通过适配器经由 HTTP 或 WebSocket 发送到区块链,响应被规范化,React Query 根据过期时间或可见性处理重新获取。\n\nWeb3-Hooks 在生态系统中与 Viem(一个现代的类型化 EVM 工具包,当前使用它)、Ethers.js(经典的 EVM 库,可通过适配器添加)、wagmi(功能更丰富的 React EVM 库,带有捆绑连接器)、The Graph(用于索引/历史数据)和 TypeChain(为合约 ABI 生成 TypeScript 类型)等工具并存。虽然 wagmi 提供开箱即用的功能,Web3-Hooks 吸引那些希望对传输和适配器有更多灵活性和精细控制的用户。它专注于实时 RPC 调用,而非更丰富的分析或索引。\n\n总体而言,Web3-Hooks 旨在通过提供模块化、类型化且适配器无关的一组 hooks,简化使用 React 构建 dApp,减少样板代码并提升代码库的可扩展性。它结合了类型化 EVM 客户端、React Query 缓存和清晰的关注点分离,为开发者提供控制权,同时不牺牲便利性或性能。