## 任务:修复 Mermaid 流式渲染抖动(id 重复创建销毁) - **标签**:`OSS26-Team`、`bug` - **关联**:#1742、#1875 - **模块**:`packages/x/components/mermaid/Mermaid.tsx` - **根因(已定位)**:`Mermaid.tsx:67` `const id = \`mermaid-${uuid++}-${children?.length||0}\`` 每次渲染都生成新 id(`uuid++` + 流式时 `children.length` 变化),导致 DOM 反复 mount/unmount 引发抖动。 - **建议组队人数**:2 人 - **基本要求**:理解 React 渲染与 `useId`、mermaid 异步 render 生命周期,能写防抖/增量渲染。 - **目标产出**: 1. id 稳定化(`useId` / ref 缓存); 2. 流式增量 + 防抖渲染,避免重复 mount; 3. 流式 demo 无抖动; 4. 性能前后对比 + 回归单测。
任务:修复 Mermaid 流式渲染抖动(id 重复创建销毁)
OSS26-Team、bugpackages/x/components/mermaid/Mermaid.tsxMermaid.tsx:67const id = \mermaid-${uuid++}-${children?.length||0}`每次渲染都生成新 id(uuid+++ 流式时children.length` 变化),导致 DOM 反复 mount/unmount 引发抖动。useId、mermaid 异步 render 生命周期,能写防抖/增量渲染。useId/ ref 缓存);