Q22 · 前端与链交互

使用过 web3-react 吗？大概怎么用？

web3-reactReact钱包连接

⚡ 速记答案（30 秒）

一个把 React 与多种 Web3 钱包打通的 Hook 库
核心是 useWeb3React()：拿到 account、chainId、provider、active 等
通过不同 Connector（Injected、WalletConnect、Network 等）管理连接逻辑
优点：前端统一钱包接入接口；缺点：版本多，升级时要注意兼容

📖 详细讲解

web3-react 核心概念

Connectors

不同的钱包连接方式：

• InjectedConnector: MetaMask 等浏览器插件

• WalletConnectConnector: WalletConnect 协议

• NetworkConnector: 只读连接（无钱包）

Hooks

• useWeb3React(): 主要 Hook，返回 provider, account, chainId 等

• useEagerConnect(): 自动重连

• useInactiveListener(): 监听状态变化

现代替代方案

web3-react 更新较慢，推荐使用：

• wagmi: React Hooks for Ethereum

• RainbowKit: 钱包连接 UI 组件

• ConnectKit: 另一个钱包连接方案

💻 代码示例

web3-react 基本使用

import { useWeb3React } from '@web3-react/core';
import { InjectedConnector } from '@web3-react/injected-connector';

const injected = new InjectedConnector({
  supportedChainIds: [1, 56, 137], // ETH, BSC, Polygon
});

function WalletButton() {
  const { active, account, activate, deactivate } = useWeb3React();

  const connect = async () => {
    try {
      await activate(injected);
    } catch (error) {
      console.error('连接失败:', error);
    }
  };

  if (active) {
    return (
      <div>
        <p>已连接: {account}</p>
        <button onClick={deactivate}>断开</button>
      </div>
    );
  }

  return <button onClick={connect}>连接钱包</button>;
}

💡

面试技巧：回答时先给出核心结论，再展开细节。如果有实际项目经验，一定要结合具体案例说明。