Chinmay Pant's questions

我正在开发一个像桌面屏幕一样的组件。它可以包含多个可调整大小和可拖动的应用程序窗口（即所有窗口都不相同）

我决定将活动窗口存储在窗口详细信息对象数组中：

const [activeWindows, setActiveWindows] = useState([
   {
    index: 1,
    title: 'App1',
    isMinimized: false,
    dimensions: {
      ...
    }
  },
  {
    index: 2,
    title: 'App2',
    isMinimized: false,
    dimensions: {
      ...
    }
  },
])

在我的屏幕组件中，我映射这些数组以渲染它们中的每一个：

{
        activeWindows.map((window) => (
          <AppWindow 
            idx={window.index}
            title={window.title}
            dimensions={window.dimensions} //Initial dimension
            handleClose={handleClose}
          />
        ))
}

handleClose是一个非常简单的函数，仅更新数组以从列表中删除目标对象。

当我更改 AppWindow 位置和尺寸然后关闭窗口时，问题就出现了，窗口对象会从列表中删除，但特定组件不会。这会导致最后一个AppWindow组件被删除，更新的activeWindows数据会映射到现有组件，从而导致内容交换（例如：如果有 4 个活动窗口，并且我删除窗口 2（即从中删除其对象activeWindows），则渲染的对象窗口 3 中的内容将移动到窗口 2，因此我的应用程序 3 的尺寸和位置将发生变化）。

我不确定这是否是解决此类场景的最佳方法，但我的主要目标是能够以一种内存高效的方式实现这一点，这样我的 DOM/VDOM 就不会被不必要的东西填满元素。