# 胶片切换图像残留问题深度分析

## 问题现象
切换胶片后，仍然会有图像残留在新胶片的viewport中。

## 根本原因分析

### 1. React组件复用问题
```typescript
// Film.tsx 中的问题代码
const generateCell = (imageId, indexOfCell) => {
  return (<ViewportContainer imageId={imageId} currentFilm={currentFilm} indexOfCell={indexOfCell} />);
};
```

**问题**：没有为ViewportContainer提供`key`属性，导致React在切换胶片时复用组件实例，只更新props。

### 2. 渲染引擎状态残留
虽然按胶片ID创建独立的渲染引擎，但切换回之前访问过的胶片时，该渲染引擎可能仍保留之前的viewport状态。

### 3. 组件卸载时序问题
当切换胶片时，旧的DcmCell组件可能没有在正确的时机卸载和清理viewport。

## 解决方案

### 1. 为ViewportContainer添加唯一key
```typescript
// Film.tsx 修复
const generateCell = (imageId, indexOfCell) => {
  const uniqueKey = `${currentFilm.id}-${indexOfCell}`;
  return (
    <ViewportContainer 
      key={uniqueKey}
      imageId={imageId} 
      currentFilm={currentFilm} 
      indexOfCell={indexOfCell} 
    />
  );
};
```

### 2. 改进渲染引擎清理策略
```typescript
// 选择一：胶片切换时强制清理所有viewport
// 选择二：改进viewport的清理逻辑，确保完全清理
```

### 3. 添加胶片切换时的强制重置
在切换胶片时，主动清理当前显示的所有viewport，确保状态重置。

## 推荐修复步骤
1. 首先修复Film.tsx中的key问题
2. 改进DcmCell.tsx的清理逻辑
3. 考虑在printSlice中添加胶片切换时的清理action