一、为什么要在React里玩转区块链？
如果你正在用React开发网页应用，突然想接入区块链功能——比如显示用户钱包余额、发起加密货币转账，或者查询智能合约数据，这时候Web3.js就是你的好帮手。简单来说，它就像一座桥，让React应用能和区块链网络（比如以太坊）对话。
传统Web应用和服务器交互用的是HTTP，而区块链交互依赖的是节点提供的特殊接口（比如JSON-RPC）。Web3.js把这些底层调用封装成简单的JavaScript函数，让开发者不用关心复杂的协议细节。
二、准备你的React战场
在开始写代码前，你需要准备三样东西：
- 一个现成的React项目（用
create-react-app或Vite创建都行） - 安装Web3.js库：
npm install web3 - 一个区块链节点连接地址（可以用Infura的免费API或者本地运行的以太坊节点）
// 技术栈：React + Web3.js
import Web3 from 'web3';
// 初始化Web3实例
const web3 = new Web3('https://mainnet.infura.io/v3/你的API_KEY');
// 检查是否连接成功
web3.eth.getBlockNumber().then(console.log); // 打印最新区块号
这段代码做了两件事：
- 通过Infura连接到以太坊主网
- 获取当前最新区块号（证明连接正常）
三、基础操作：读链上数据
区块链上的数据是公开的，我们先用Web3.js实现几个常见查询功能：
1. 查询钱包余额
// 技术栈：React + Web3.js
async function getBalance() {
const address = '0x742d35Cc6634C0532925a3b844Bc454e4438f44e'; // 示例钱包地址
const balance = await web3.eth.getBalance(address);
// 将wei单位转为ether
console.log(web3.utils.fromWei(balance, 'ether') + ' ETH');
}
2. 读取智能合约数据
假设有个ERC20代币合约，我们想查某个地址的代币余额：
// 技术栈：React + Web3.js
const contractABI = [/* 这里放合约ABI */]; // 简化示例
const contractAddress = '0x合约地址';
async function getTokenBalance(userAddress) {
const contract = new web3.eth.Contract(contractABI, contractAddress);
const balance = await contract.methods.balanceOf(userAddress).call();
return web3.utils.fromWei(balance, 'ether');
}
四、进阶操作：写数据到区块链
发送交易会改变链上状态（比如转账），需要支付Gas费。关键步骤：
1. 连接用户钱包
浏览器通常通过MetaMask等插件注入window.ethereum对象：
// 技术栈：React + Web3.js
async function connectWallet() {
if (window.ethereum) {
const accounts = await window.ethereum.request({
method: 'eth_requestAccounts'
});
return accounts[0]; // 返回第一个账户地址
} else {
alert('请安装MetaMask!');
}
}
2. 发送ETH转账
// 技术栈：React + Web3.js
async function sendETH(toAddress, amount) {
const fromAddress = await connectWallet();
const tx = {
from: fromAddress,
to: toAddress,
value: web3.utils.toWei(amount, 'ether'),
gas: 21000 // 标准转账Gas限制
};
// 弹出MetaMask确认窗口
const receipt = await window.ethereum.request({
method: 'eth_sendTransaction',
params: [tx]
});
return receipt; // 返回交易哈希
}
五、实战技巧与避坑指南
1. 错误处理
区块链操作可能失败（比如Gas不足、用户拒绝交易），必须捕获异常：
// 技术栈：React + Web3.js
sendETH('0x接收地址', '0.1')
.then(receipt => console.log('交易成功:', receipt))
.catch(err => {
if (err.code === 4001) console.log('用户取消了交易');
else console.error('交易失败:', err);
});
2. 性能优化
- 缓存区块数据：频繁查询的数据可以存到本地
- 批量查询：用
Promise.all同时查多个数据 - 监听事件：代替轮询查询
// 监听新区块
web3.eth.subscribe('newBlockHeaders', (error, blockHeader) => {
if (!error) console.log('最新区块:', blockHeader.number);
});
六、应用场景与选型建议
适合场景
✅ 加密货币钱包前端
✅ NFT交易平台
✅ DeFi质押/借贷界面
技术对比
| 方案 | 优点 | 缺点 |
|---|---|---|
| Web3.js | 功能全面，文档丰富 | 包体积较大 |
| Ethers.js | 轻量，TypeScript友好 | 新版本学习曲线 |
| viem | 现代API设计 | 生态较新 |
七、写在最后
通过Web3.js，React应用可以轻松实现：
- 显示链上数据（余额、交易记录）
- 与智能合约交互
- 处理用户钱包连接
记住几个关键点：
- 读操作直接调用，写操作需要用户签名
- 始终处理异步和错误
- 生产环境建议用Infura/Alchemy等专业节点服务
现在，试着在你的React项目里添加一个"显示我的ETH余额"按钮吧！
评论