# React缓存实现思路

**Repository Path**: qm-jj/react-cache-dom

## Basic Information

- **Project Name**: React缓存实现思路
- **Description**: React缓存实现思路
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-01
- **Last Updated**: 2024-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CacheDom 组件

## 特性

- 🚀 高性能的 DOM 缓存机制
- 💾 LRU （最近最少使用） 缓存策略
- 🎯 精确的生命周期控制
- 📦 灵活的缓存管理
- 🔄 支持缓存命中 / 未命中回调
- 📊 缓存状态监控

## 基础用法

```tsx
import { CacheGroup, CacheDom } from 'cache-dom';

function App() {
  const [show, setShow] = useState(true);

  return (
    <CacheGroup groupId="main-group">
      {show && (
        <CacheDom cacheKey="my-component">
          <MyComponent />
        </CacheDom>
      )}
    </CacheGroup>
  );
}
```

## 组件 API

### CacheGroup

缓存组的容器组件，管理一组缓存实例。

#### Props

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| groupId | string | - | 缓存组的唯一标识 |
| capacity | number | 10 | 缓存容量，超出时会移除最久未使用的缓存 |
| children | ReactNode | - | 子组件 |

#### Ref Methods

| 方法 | 参数 | 描述 |
|------|------|------|
| clearCache | (key?: string, config?: { unmount?: boolean }) | 清除指定或所有缓存 |
| getCacheKeys | () | 获取所有缓存的 key |
| getCacheSize | () | 获取当前缓存数量 |

### CacheDom

具体的缓存组件，负责缓存和恢复 DOM 节点。

#### Props

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| cacheKey | string | - | 缓存的唯一标识 |
| disabled | boolean | false | 是否禁用缓存 |
| deps | any[] | [] | 依赖数组，变化时会重新渲染 |
| onCacheHit | () => void | - | 缓存命中时的回调 |
| onCacheMiss | () => void | - | 缓存未命中时的回调 |
| children | ReactNode | - | 需要被缓存的内容 |

## 高级用法

### 1. 缓存生命周期监控

```tsx
<CacheDom
  cacheKey="my-component"
  onCacheHit={() => console.log('缓存命中')}
  onCacheMiss={() => console.log('缓存未命中')}
>
  <MyComponent />
</CacheDom>
```

### 2. 手动清除缓存

```tsx
function App() {
  const cacheGroupRef = useRef<CacheGroupRef>(null);

  const handleClearCache = () => {
    // 清除指定缓存
    cacheGroupRef.current?.clearCache('my-component');
    // 或清除所有缓存
    cacheGroupRef.current?.clearCache();
  };

  return (
    <CacheGroup ref={cacheGroupRef}>
      {/* ... */}
    </CacheGroup>
  );
}
```

### 3. 依赖更新

```tsx
function App() {
  const [count, setCount] = useState(0);

  return (
    <CacheDom cacheKey="my-component" deps={[count]}>
      <MyComponent count={count} />
    </CacheDom>
  );
}
```

## 贡献

欢迎提交 Issue