第6章：与其他Web技术集成（上）

想象一下，你正在建造一艘星际飞船——Helia是你的曲速引擎，而React或Vue则是闪亮的驾驶舱仪表盘。本章我们将探讨如何将这两个世界无缝连接。

🚀 React与Helia：声明式分布式界面

React的声明式范式与Helia的异步本质初看似乎像是油与水——一个追求可预测的状态管理，另一个则沉浸在网络的不确定性之中。但事实上，它们能形成完美的共生关系。

Helia节点生命周期：在浏览器中，Helia节点需要经历初始化、连接对等节点、内容获取/存储等阶段。

import React, { createContext, useContext, useEffect, useState } from 'react';
import { createHelia } from 'helia';
import { strings } from '@helia/strings';

const HeliaContext = createContext(null);

export const HeliaProvider = ({ children }) => {
  const [helia, setHelia] = useState(null);
  const [stringStore, setStringStore] = useState(null);

  useEffect(() => {
    const init = async () => {
      const heliaInstance = await createHelia();
      const store = strings(heliaInstance);
      setHelia(heliaInstance);
      setStringStore(store);
    };
    init();
    
    return () => {
      if (helia) helia.stop();
    };
  }, []);

  return (
    <HeliaContext.Provider value={{ helia, stringStore }}>
      {children}
    </HeliaContext.Provider>
  );
};

export const useHelia = () => useContext(HeliaContext);

这个Provider模式就像为你的应用装备了一个分布式数据引擎。

🌊 Vue与Helia：响应式数据河流

如果说React提供了结构化的组件脚手架，那么Vue的响应式系统则像一条流畅的数据河流。

响应式系统：Vue使用代理(Proxy)实现数据响应式，当数据变化时自动更新UI。

// useHelia.js
import { ref, onUnmounted } from 'vue';
import { createHelia } from 'helia';

export function useHelia() {
  const helia = ref(null);
  const isInitializing = ref(true);

  const initHelia = async () => {
    const heliaInstance = await createHelia();
    helia.value = heliaInstance;
    isInitializing.value = false;
  };

  initHelia();

  onUnmounted(() => {
    if (helia.value) helia.value.stop();
  });

  return { helia, isInitializing };
}

第6章（下）继续...