React 项目中创建 Web3 实例的最佳实践方案是什么？

异常表现根因 #

使用useRef + useEffect传递实例时拿到null的核心原因：

• useRef 实例值的变更不会触发React组件重渲染，Context Provider 感知不到web3.current的更新，下游组件拿到的永远是首次渲染时的初始值null
• useState 的更新函数会触发组件重渲染，Provider 会将最新的实例值同步给所有下游消费组件，因此可以正常传递
• 直接在渲染逻辑中初始化的方案在纯客户端渲染项目中可以正常运行，但如果是Next.js等支持SSR/SSG的框架，服务端渲染时不存在window对象，会直接触发报错。

通用最佳实践 #

• 实例管理方案：优先用useState存储全局Web3实例，useRef仅作为补充存储，用于非渲染相关的实例调用，避免闭包问题
• 初始化时机：统一放到useEffect中执行，规避SSR场景下的window不存在报错，同时避免重复触发实例化逻辑
• 实例传递方案：全局创建单实例后通过Context透传，不要在每个组件重复实例化，减少不必要的初始化开销，也避免多实例导致的连接状态不同步问题
• 异常兼容：初始化时增加钱包存在性判断，可全局或者在下游组件增加未安装钱包的提示逻辑

标准实现代码 #

export default function MyApp({ Component, pageProps }) {
  // 存储用于Context传递的实例，变更会触发下游更新
  const [web3, setWeb3] = useState(null)
  // 可选：存储ref版本的实例，供内部回调调用避免闭包问题
  const web3Ref = useRef(null)
  const [hasWallet, setHasWallet] = useState(true)

  useEffect(() => {
    // 仅客户端执行，跳过服务端渲染阶段
    if (typeof window === 'undefined') return
    if (!window.ethereum) {
      setHasWallet(false)
      return
    }
    // 初始化实例
    const w3Instance = new Web3(window.ethereum)
    setWeb3(w3Instance)
    web3Ref.current = w3Instance
  }, [])

  // 可选：全局提示未安装钱包
  if (!hasWallet && typeof window !== 'undefined') {
    return <div>请安装MetaMask等以太坊钱包插件后使用</div>
  }

  return (
    <Web3Context.Provider value={web3}>
      <Component {...pageProps} />
    </Web3Context.Provider>
  )
}

内容的提问来源于stack exchange，提问作者user4367814