Skip to content

[OSS26-Team] 修复 Mermaid 流式渲染抖动(id 重复创建销毁) #1947

Description

@kimteayon

任务:修复 Mermaid 流式渲染抖动(id 重复创建销毁)

  • 标签OSS26-Teambug
  • 关联mermaid组件流式渲染的时候 抖动 id为dmermaid开头的元素重复创建和销毁 引起页面抖动 #1742Mermaid显示和下载问题 #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. 性能前后对比 + 回归单测。

Metadata

Metadata

Assignees

No one assigned

    Labels

    OSS26-TeamOSS26-TeambugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions