渲染大型桌子时的性能问题

Question

我正在创建一个日历组件，用于使用HTML表调度，我希望能够拖动类似于Google Cal的事件。当我拖动元素时，我希望使用Ondragenter处理程序拖动的单元格背景。我是通过将标识符保存到一个状态下的单元格中，然后在单元格上制作背景样式来做到这一点。

但是，背景更新似乎落后于用户，因为该表非常大，并且由于映射了单元格，因此正在重新构建整个表。见下文。

请参阅下面的代码。

const [dragCellNum, setDragCellNum] = useState(null);


const handleDragIn = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragCellNum(e.target.id);
};

// simplified return
return 
<table>
  <tbody>
    // Rows are mapped as well.
    <tr>
      // Mapping all the cells here
      {data.map(x=> 
         <td
           key={id}
           id={id}
           style={{
             // Here is conditional BG color change
             backgroundColor: id === dragCellNum ? '#CCCCCC' : #FFFFFF,
           }}
           onDragEnter={handleDragIn}
         >
      )}
    </tr>
  </tbody>
</table>

为了简单起见，我遗漏了很多东西，但是桌子很大。从本质上讲，我想知道是否有一种方法可以使用React Memo或Ref或完全不同的方法来防止整个桌子重新供应。

谢谢大家。