在过去的几年里，我深度参与了区块链项目，而 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 缓存和清晰的关注点分离，为开发者提供控制权，同时不牺牲便利性或性能。
