研究即时模式绘制、高密度场景、粒子与帧预算。
单个 canvas 承载大量图元,避免为每个粒子创建 DOM 节点。
位置、速度和指针留在 refs 中,只把低频遥测交给 React。
ResizeObserver 与 DPR 上限共同维持清晰度、显存和绘制成本的平衡。
Canvas 适合图元很多、每帧都变化、DOM 语义价值很低的视觉层。它用一个绘制表面换来吞吐量,也同时放弃了元素级布局、可访问性和原生事件模型;因此应该被当成受预算约束的视觉运行时,而不是常规 UI 的默认选择。