将现有的React应用接入EIP8990与Cinemas协议，本质上是把原本静态持有的NFT资产模型，替换为一种带时间边界和使用权转让能力的租赁模型。影院场景下的NFT不是收藏品，而是某一场电影、某一个座位的限时进入凭证。前端不仅要读取链上所有权，还要实时感知到期、续租、转借等状态变化，这对React的状态管理提出了比传统Web3应用更细的要求。
理解EIP8990与Cinemas协议的差异
EIP8990并不是一个广为人知的基础代币标准，它主要解决的是非同质化资产的使用权分离问题。在传统的ERC721中，拥有者即使用者，转让即变更owner。但在影院票务里，影院方可能是NFT的永久owner，而观众只是一段时间内被授权的使用者。EIP8990通过引入userOf、expiresAt等字段，让合约层能记录某个地址对 token 的临时使用权。Cinemas协议在EIP8990之上做了业务封装，把座位映射、场次时间戳和验票签名验证逻辑收进一套推荐实现的合约模板中。
这种差异对React应用的影响非常直接。旧版代码里如果只用ownerOf来判断用户是否持有票，迁移后必须改为查询userOf并比对当前区块时间是否小于expiresAt。否则会出现用户明明已经进场但界面仍显示无票的情况。另外Cinemas协议要求验票时携带影院方离线签名的nonce，前端需要把用户钱包地址、座位ID和场次ID拼成固定格式再请求签名，这部分逻辑最好抽离成独立hook，不要散落在组件里。
从架构角度看，Cinemas协议还规定了一个可选的续租接口。React端如果希望用户在电影开始前三十分钟能一键延长使用时间，就必须在合约调用层处理approve和setUser的双重事务。很多迁移失败的项目就是在这里只发了setUser而忘了重新授权，导致交易被合约拒绝。理解这些协议层差异，是后面写代码的前提。
React状态层与钱包事件的重构
迁移时最常见的问题是直接拿旧版的useWeb3React或ethers的provider去轮询链上数据。EIP8990的状态变化频率高，且Cinemas的验票动作发生在链下签名、链上校验的混合路径中，单纯轮询既慢又费rpc额度。推荐做法是利用合约的TransferUser事件和Expires事件，在React里用effect订阅，再把结果写进一个基于reducer的本地store。
下面这段代码示例展示了一个最小化的事件订阅hook，它监听Cinemas合约发出的用户使用权变更，并更新React状态。注意其中对<input>没有依赖，只是纯合约事件处理。
import { useEffect, useReducer } from 'react';
import { Contract } from 'ethers';
const cinemaAbi = [
'event TransferUser(uint256 indexed tokenId, address indexed from, address indexed to, uint64 expiresAt)',
'function userOf(uint256 tokenId) view returns (address)',
'function expiresAt(uint256 tokenId) view returns (uint64)'
];
function reducer(state, action) {
switch (action.type) {
case 'update':
return { ...state, [action.tokenId]: action.info };
default:
return state;
}
}
export function useCinemaTickets(address, provider) {
const [state, dispatch] = useReducer(reducer, {});
useEffect(() => {
if (!address || !provider) return;
const contract = new Contract('0xContractAddress', cinemaAbi, provider);
const filter = contract.filters.TransferUser(null, null, address);
const handler = (tokenId, from, to, expires) => {
dispatch({ type: 'update', tokenId: tokenId.toString(), info: { to, expires: expires.toNumber() } });
};
contract.on(filter, handler);
return () => contract.off(filter, handler);
}, [address, provider]);
return state;
}
上面的hook只处理了被动接收事件，实际项目中还要在用户打开页面时主动拉取一次userOf和expiresAt做初始渲染。这里容易踩的坑是浏览器刷新后provider重置，导致事件监听器没挂上，用户看到的是旧缓存。解决办法是在App根组件里用一个标志位强制在connect完成后重新mount订阅组件。
另外Cinemas协议建议前端对验票nonce做本地缓存失效控制。比如用户验过一次票，影院读卡器确认后，前端不应再重复弹出签名框。可以用sessionStorage记录已验票的交易哈希，但必须监听区块回滚事件清除，否则测试网重组会让界面误判。
验票组件与续租交互的最小实现
在影院闸机端或用户手机端，验票组件的核心是把钱包地址、座位ID、场次ID交给钱包签名，再把签名发给Cinemas的验票API。React里可以用一个受控组件收集场次信息，调用signMessage得到签名串。注意Cinemas要求签名原文必须按字段顺序拼接并用换行分隔，不能加多余空格。
续租交互则稍微复杂。用户点击续租时，前端要先调用approve给Cinemas合约操作权限，再调用setUser写入新的到期时间。这两个交易如果分开await，用户可能中途关掉弹窗导致状态不一致。可以用ethers的Promise.all配合一个loading态，但在UI上要明确提示用户两笔交易都会扣gas。
import { useState } from 'react';
import { Contract, utils } from 'ethers';
export function RentButton({ tokenId, cinemaContract, signer }) {
const [loading, setLoading] = useState(false);
async function renew() {
setLoading(true);
try {
const approveTx = await cinemaContract.connect(signer).approve(cinemaContract.address, tokenId);
const setTx = await cinemaContract.connect(signer).setUser(tokenId, await signer.getAddress(), Math.floor(Date.now() / 1000) + 3600);
await Promise.all([approveTx.wait(), setTx.wait()]);
alert('续租成功');
} catch (e) {
alert('续租失败：' + e.message);
} finally {
setLoading(false);
}
}
return <button disabled={loading} onClick={renew}>{loading ? '处理中' : '续租一小时'}</button>;
}
这个续租按钮只是演示，生产环境要把alert换成更友好的提示组件，并且对approve做额度判断，如果已经授权过就可以跳过第一笔交易以省gas。Cinemas协议的文档里也提到，影院方部署时可以把某些可信前端地址加入免approve白名单，这时候React端需要先查询白名单映射再决定调用路径。
整体来看，React应用迁移到EIP8990加Cinemas并不是把旧组件换掉就行，而是要在状态来源、事件订阅和签名流程三个层面做适配。把协议差异吃透，再把链上事件当成普通前端数据流来处理，就能比较平稳地完成改造，让用户在界面上顺畅地完成购票、验票和续租。