# iframe-micro-react-state

**Repository Path**: ittantt/iframe-micro-react-state

## Basic Information

- **Project Name**: iframe-micro-react-state
- **Description**: 基于 iframe 的微应用状态管理与父应用通信工具，仅面向 React 项目生态
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-22
- **Last Updated**: 2025-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# iframe-micro-react-state

微前端代替方案，适用于子包数据初始化

---

## 简介

这个包专为 React 项目的 iframe 子页面设计，帮你极简同步父页面下发的初始化数据。只需一行代码，自动监听、自动更新，类型安全，免去手写 postMessage 监听和状态管理的繁琐。

- 适合微前端架构下的子应用数据初始化
- 只做一件事：让你在 React 里随时拿到父页面传过来的数据
- 默认内存单例，页面刷新/iframe 重载后由父页面自动下发，无需持久化

---

## 快速开始

```typescript
import { useMicroAppState } from 'iframe-micro-react-state';

export default function MyMicroApp() {
  const state = useMicroAppState();
  if (!state?.initialized) return <div>加载中...</div>;
  return <pre>{JSON.stringify(state.data, null, 2)}</pre>;
}
```

---

## 权限检查

父应用初始化时会传 authorityList（二维数组），你可以用 Hook 直接判断权限：

```tsx
import { useAuthorityChecker } from 'iframe-micro-react-state';

export default function MyComponent() {
  // 会自动读取父级传来的 authorityList
  const hasPerm = useAuthorityChecker('A'); // 检查单个权限
  const hasAnyPerm = useAuthorityChecker(['A', 'C']); // 检查多个权限
  return <div>{hasPerm ? '有权限' : '无权限'}</div>;
}
```

---

## 常见问题

**Q: 需要自己写 postMessage 监听吗？**
A: 不用，Hook 已经自动帮你监听和解绑了。

**Q: 页面刷新后数据会丢吗？**
A: 会，但这正是微前端场景的推荐做法。父页面每次都会重新下发数据。

**Q: 支持非 React 项目吗？**
A: 不支持，只为 React 场景设计。

**Q: 包体积大吗？能 tree-shaking 吗？**
A: 产物极小，只导出核心 Hook 和类型，支持 tree-shaking。

---

## 依赖说明

- 需要 React 17 及以上版本（peerDependencies: react, react-dom）
- 类型安全依赖 @types/react

---

## License

MIT