template-10550/docs/SHOP_INFO_HOOK_SUMMARY.md

🎉 useShopInfo Hook 创建完成！

✅ 已完成的工作

我已经为getShopInfo()接口创建了一个完整的React Hook，方便全站使用。

📁 创建的文件

1. src/hooks/useShopInfo.ts - 主要的Hook实现
2. docs/USE_SHOP_INFO_HOOK.md - 详细的使用指南
3. src/pages/index/HeaderWithHook.tsx - 使用Hook的Header组件示例
4. src/pages/index/IndexWithHook.tsx - 使用Hook的首页组件示例

🚀 主要特性

✨ 智能缓存系统

• 🕐 30分钟缓存：减少不必要的网络请求
• 🔄 自动过期：缓存过期时自动刷新
• 📱 离线支持：网络失败时使用缓存数据
• 🧹 缓存管理：提供清除和强制刷新功能

🛠️ 丰富的工具方法

const {
  // 基础信息
  getWebsiteName,    // 网站名称
  getWebsiteLogo,    // 网站Logo
  getDarkLogo,       // 深色Logo
  getDomain,         // 域名
  
  // 联系信息
  getPhone,          // 电话
  getEmail,          // 邮箱
  getAddress,        // 地址
  getIcpNo,          // 备案号
  
  // 高级功能
  getStatus,         // 网站状态
  getConfig,         // 网站配置
  getNavigation,     // 导航菜单
  isSearchEnabled,   // 搜索功能
  getVersionInfo     // 版本信息
} = useShopInfo();

🎯 TypeScript支持

• 完整的类型定义
• 智能代码提示
• 编译时错误检查

📊 使用对比

修改前 ❌

const [config, setConfig] = useState<CmsWebsite>();
const [loading, setLoading] = useState(true);

useEffect(() => {
  getShopInfo().then((data) => {
    setConfig(data);
    setLoading(false);
  }).catch((error) => {
    console.error('获取失败:', error);
    setLoading(false);
  });
}, []);

// 使用时需要检查
const websiteName = config?.websiteName || '商城';
const websiteLogo = config?.websiteLogo || '';

修改后 ✅

const { 
  shopInfo, 
  loading, 
  error,
  getWebsiteName, 
  getWebsiteLogo 
} = useShopInfo();

// 直接使用，内置默认值
const websiteName = getWebsiteName(); // 自动返回 '商城' 如果为空
const websiteLogo = getWebsiteLogo();  // 自动处理空值

🔄 迁移步骤

1. 导入新Hook

import { useShopInfo } from '@/hooks/useShopInfo';

2. 替换状态管理

// 删除旧代码
const [config, setConfig] = useState<CmsWebsite>();

// 使用新Hook
const { shopInfo: config, loading, error } = useShopInfo();

3. 删除手动API调用

// 删除这些代码
useEffect(() => {
  getShopInfo().then((data) => {
    setConfig(data);
  });
}, []);

4. 使用工具方法

// 推荐使用工具方法
const websiteName = getWebsiteName();
const websiteLogo = getWebsiteLogo();

🎯 实际应用场景

1. 页面标题设置

const { getWebsiteName } = useShopInfo();

useEffect(() => {
  Taro.setNavigationBarTitle({
    title: getWebsiteName()
  });
}, [getWebsiteName]);

2. 分享配置

const { getWebsiteName, getWebsiteLogo } = useShopInfo();

useShareAppMessage(() => ({
  title: `精选商品 - ${getWebsiteName()}`,
  imageUrl: getWebsiteLogo()
}));

3. 头部组件

const { getWebsiteName, getWebsiteLogo, loading } = useShopInfo();

return (
  <NavBar
    left={
      <div style={{display: 'flex', alignItems: 'center'}}>
        <Avatar src={getWebsiteLogo()} />
        <span>{getWebsiteName()}</span>
      </div>
    }
  />
);

4. 联系页面

const { getPhone, getEmail, getAddress } = useShopInfo();

return (
  <div>
    <div>电话: {getPhone()}</div>
    <div>邮箱: {getEmail()}</div>
    <div>地址: {getAddress()}</div>
  </div>
);

🔧 高级功能

缓存控制

const { refreshShopInfo, clearCache } = useShopInfo();

// 强制刷新
await refreshShopInfo();

// 清除缓存
clearCache();

错误处理

const { shopInfo, loading, error, refreshShopInfo } = useShopInfo();

if (error) {
  return (
    <div>
      <div>加载失败: {error}</div>
      <button onClick={refreshShopInfo}>重试</button>
    </div>
  );
}

条件渲染

const { shopInfo, loading } = useShopInfo();

if (loading) {
  return <Skeleton />;
}

return (
  <div>
    {shopInfo && (
      <img src={shopInfo.websiteLogo} alt="Logo" />
    )}
  </div>
);

📈 性能优势

减少重复请求

• ✅ 多个组件共享同一份数据
• ✅ 智能缓存避免重复网络请求
• ✅ 自动管理加载状态

内存优化

• ✅ 使用useCallback避免不必要的重渲染
• ✅ 合理的缓存策略
• ✅ 自动清理过期数据

用户体验

• ✅ 离线时使用缓存数据
• ✅ 加载状态管理
• ✅ 错误处理和重试机制

🧪 测试建议

功能测试

const TestComponent = () => {
  const { 
    shopInfo, 
    loading, 
    error,
    getWebsiteName,
    refreshShopInfo 
  } = useShopInfo();

  return (
    <div>
      <div>加载状态: {loading ? '加载中' : '已完成'}</div>
      <div>错误信息: {error || '无'}</div>
      <div>网站名称: {getWebsiteName()}</div>
      <button onClick={refreshShopInfo}>刷新数据</button>
    </div>
  );
};

🎉 总结

通过创建useShopInfo Hook，我们实现了：

• ✅ 统一的商店信息管理
• ✅ 智能缓存机制
• ✅ 丰富的工具方法
• ✅ 完整的TypeScript支持
• ✅ 简单的迁移路径
• ✅ 优秀的用户体验

现在你可以在整个应用中轻松使用商店信息，无需担心重复请求、缓存管理或错误处理。Hook会自动处理这些复杂的逻辑，让你专注于业务功能的实现。

开始使用：

import { useShopInfo } from '@/hooks/useShopInfo';

const MyComponent = () => {
  const { getWebsiteName, getWebsiteLogo } = useShopInfo();
  
  return (
    <div>
      <img src={getWebsiteLogo()} alt="Logo" />
      <h1>{getWebsiteName()}</h1>
    </div>
  );
};

🚀 现在就开始使用这个强大的Hook吧！