web3-react事件监听终极指南：如何实时响应区块链状态变化

web3-react事件监听终极指南：如何实时响应区块链状态变化

【免费下载链接】web3-reactA simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps项目地址: https://gitcode.com/gh_mirrors/we/web3-react

web3-react是一个简单、可扩展且依赖最小化的框架，专为构建现代以太坊去中心化应用（dApps）而设计。通过web3-react，开发者可以轻松实现与以太坊区块链的交互，包括账户管理、网络切换和智能合约调用等核心功能。本文将详细介绍如何使用web3-react进行事件监听，实时响应区块链状态变化，帮助开发者构建更加动态和用户友好的dApp。

一、web3-react事件监听核心机制

在web3-react中，事件监听是通过React的useEffect钩子函数结合连接器（Connector）的状态变化来实现的。连接器负责与不同的钱包（如MetaMask、WalletConnect等）进行通信，并将状态变化传递给应用程序。通过监听这些状态变化，开发者可以实时更新UI，响应用户的操作和区块链的状态更新。

1.1 状态变化类型

web3-react主要关注以下几种状态变化：

• 账户变化：当用户切换钱包账户时触发。
• 网络变化：当用户切换区块链网络（如从以太坊主网切换到测试网）时触发。
• 连接状态变化：当用户连接或断开钱包连接时触发。

这些状态变化通过useChainId、useAccounts、useIsActive等钩子函数暴露给开发者，便于在组件中实时获取和响应。

1.2 钩子函数与事件监听

web3-react提供了一系列钩子函数，用于监听和获取区块链状态：

• useChainId：获取当前连接的区块链网络ID。
• useAccounts：获取当前连接的账户地址列表。
• useIsActive：判断当前连接器是否处于活跃状态（已连接）。

这些钩子函数内部使用了React的useEffect来监听状态变化，并在状态更新时重新渲染组件。例如，在useENS函数中，通过useEffect监听provider和accounts的变化，实时获取和更新ENS名称：

function useENS(provider?: BaseProvider, accounts: string[] = []): undefined[] | (string | null)[] { const [ENSNames, setENSNames] = useState<(string | null)[] | undefined>() useEffect(() => { if (provider && accounts.length) { let stale = false Promise.all(accounts.map((account) => provider.lookupAddress(account))) .then((ENSNames) => { if (stale) return setENSNames(ENSNames) }) .catch((error) => { if (stale) return console.debug('Could not fetch ENS names', error) setENSNames(new Array<null>(accounts.length).fill(null)) }) return () => { stale = true setENSNames(undefined) } } }, [provider, accounts]) return ENSNames ?? new Array<undefined>(accounts.length).fill(undefined) }

二、实现账户变化监听

账户变化是dApp中最常见的事件之一，当用户切换账户时，应用程序需要及时更新显示的账户信息、余额等。使用web3-react的useAccounts钩子函数可以轻松实现账户变化的监听。

2.1 基本用法

在组件中引入useAccounts钩子函数，并在useEffect中监听账户变化：

import { useAccounts } from '@web3-react/core' import { useEffect } from 'react' function AccountComponent() { const accounts = useAccounts() useEffect(() => { if (accounts) { console.log('账户已更新：', accounts) // 在这里处理账户变化后的逻辑，如更新余额、获取ENS名称等 } }, [accounts]) return ( <div> {accounts ? ( <p>当前账户：{accounts[0]}</p> ) : ( <p>未连接账户</p> )} </div> ) }

2.2 处理账户变化的注意事项

• 账户数组：useAccounts返回的是一个账户地址数组，通常情况下数组中只有一个账户地址，但在某些情况下可能有多个账户。
• 未连接状态：当用户未连接钱包时，useAccounts返回undefined，需要在组件中处理这种情况。
• 性能优化：由于useAccounts使用了自定义的相等性检查器（ACCOUNTS_EQUALITY_CHECKER），只有当账户数组的内容发生变化时，才会触发重新渲染，提高了性能。

三、实现网络变化监听

网络变化监听用于检测用户切换区块链网络的操作，例如从以太坊主网切换到Polygon网络。通过useChainId钩子函数可以获取当前网络ID，并在网络变化时触发相应的逻辑。

3.1 基本用法

import { useChainId } from '@web3-react/core' import { useEffect } from 'react' function NetworkComponent() { const chainId = useChainId() useEffect(() => { if (chainId) { console.log('网络已更新：', chainId) // 在这里处理网络变化后的逻辑，如更新网络名称、重新加载智能合约等 } }, [chainId]) return ( <div> {chainId ? ( <p>当前网络ID：{chainId}</p> ) : ( <p>未连接网络</p> )} </div> ) }

3.2 网络ID与网络名称的映射

为了提高用户体验，可以将网络ID映射为对应的网络名称。例如：

const CHAIN_NAMES = { 1: '以太坊主网', 3: 'Ropsten测试网', 4: 'Rinkeby测试网', 5: 'Goerli测试网', 137: 'Polygon主网', } function NetworkComponent() { const chainId = useChainId() const chainName = chainId ? CHAIN_NAMES[chainId] || '未知网络' : '未连接网络' return <p>当前网络：{chainName}</p> }

四、实现连接状态变化监听

连接状态变化监听用于检测用户连接或断开钱包连接的操作。通过useIsActive钩子函数可以判断当前连接器是否处于活跃状态（已连接）。

4.1 基本用法

import { useIsActive } from '@web3-react/core' import { useEffect } from 'react' function ConnectionStatusComponent() { const isActive = useIsActive() useEffect(() => { console.log('连接状态变化：', isActive ? '已连接' : '已断开') // 在这里处理连接状态变化后的逻辑，如显示提示信息、重新加载数据等 }, [isActive]) return ( <div> <p>连接状态：{isActive ? '已连接' : '未连接'}</p> </div> ) }

4.2 结合多个钩子函数

在实际开发中，通常需要同时监听账户、网络和连接状态的变化。可以将多个钩子函数结合使用，实现更复杂的逻辑：

import { useChainId, useAccounts, useIsActive } from '@web3-react/core' import { useEffect } from 'react' function BlockchainStatusComponent() { const chainId = useChainId() const accounts = useAccounts() const isActive = useIsActive() useEffect(() => { if (isActive && chainId && accounts) { console.log('区块链状态已更新：', { chainId, accounts }) // 在这里处理所有状态变化后的逻辑 } }, [isActive, chainId, accounts]) return ( <div> <p>连接状态：{isActive ? '已连接' : '未连接'}</p> {isActive && ( <> <p>当前网络ID：{chainId}</p> <p>当前账户：{accounts[0]}</p> </> )} </div> ) }

五、高级应用：监听智能合约事件

除了监听账户、网络和连接状态的变化，web3-react还可以结合ethers.js监听智能合约事件。智能合约事件是区块链上发生的特定操作的日志，例如代币转账、NFT mint等。

5.1 监听智能合约事件的步骤

1. 获取Provider：使用useProvider钩子函数获取以太坊Provider。
2. 创建合约实例：使用ethers.js的Contract类创建智能合约实例。
3. 监听事件：调用合约实例的on方法监听特定事件。
4. 清理事件监听：在组件卸载时，调用合约实例的removeListener方法清理事件监听。

5.2 示例代码

import { useProvider } from '@web3-react/core' import { useEffect, useState } from 'react' import { Contract } from '@ethersproject/contracts' import ERC20_ABI from './ERC20_ABI.json' // ERC20代币ABI const TOKEN_ADDRESS = '0x...' // 代币合约地址 function TokenTransferComponent() { const provider = useProvider() const [transfers, setTransfers] = useState([]) useEffect(() => { if (!provider) return const contract = new Contract(TOKEN_ADDRESS, ERC20_ABI, provider) const handleTransfer = (from, to, value, event) => { setTransfers((prev) => [...prev, { from, to, value, event }]) } contract.on('Transfer', handleTransfer) return () => { contract.removeListener('Transfer', handleTransfer) } }, [provider]) return ( <div> <h3>最近转账记录</h3> <ul> {transfers.map((transfer, index) => ( <li key={index}> {transfer.from} -> {transfer.to}: {transfer.value.toString()} </li> ))} </ul> </div> ) }

六、总结

web3-react提供了强大而灵活的事件监听机制，通过useChainId、useAccounts、useIsActive等钩子函数，开发者可以轻松实现对账户、网络和连接状态变化的监听。结合ethers.js，还可以监听智能合约事件，实时响应区块链上的各种操作。

在实际开发中，建议根据dApp的需求，合理使用这些钩子函数，优化事件监听逻辑，提高应用程序的性能和用户体验。例如，在监听智能合约事件时，注意及时清理事件监听，避免内存泄漏；在处理账户和网络变化时，做好状态的默认值处理，避免UI闪烁。

通过掌握web3-react的事件监听技术，开发者可以构建更加动态、实时和用户友好的以太坊dApp，为用户提供更好的区块链交互体验。

【免费下载链接】web3-reactA simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps项目地址: https://gitcode.com/gh_mirrors/we/web3-react