dros/film-image-residue-analysis.md

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

问题现象

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

根本原因分析

1. React组件复用问题

// 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

// Film.tsx 修复
const generateCell = (imageId, indexOfCell) => {
  const uniqueKey = `${currentFilm.id}-${indexOfCell}`;
  return (
    <ViewportContainer 
      key={uniqueKey}
      imageId={imageId} 
      currentFilm={currentFilm} 
      indexOfCell={indexOfCell} 
    />
  );
};

2. 改进渲染引擎清理策略

// 选择一：胶片切换时强制清理所有viewport
// 选择二：改进viewport的清理逻辑，确保完全清理

3. 添加胶片切换时的强制重置

在切换胶片时，主动清理当前显示的所有viewport，确保状态重置。

推荐修复步骤

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