如何通知 blazor(webassemble) 关于 js 所做的 DOM 更改？

Question

我正在尝试减少渲染数千个跨度的非常重的组件的渲染计数。我无法应用虚拟化，因为跨度具有不同的大小。

<div contenteditable="true">
    @foreach (var item in els)
    {
        <span @key="@item.Key" class="@item.cssClass">@item.String</span>
    }
</div>

我尝试用渲染跨度的组件替换跨度并且它可以工作，但初始渲染时间花费了太长的时间。

我无法通过 js 完成所有操作并禁用重新渲染，因为根 div 可能包含一些其他 blazor 组件。

我需要通过 JS 应用一些更改而不重新渲染，但有时会发生重新渲染并且渲染状态已损坏。我如何通知 blazor dom 的变化？ 或者也许我需要在渲染之前恢复 js 所做的所有更改？

更改类型：

1. 修改span的textContent
2. 在一定偏移处分割跨度
3. 将span添加到div中

我需要使用类似 node.dispatchEvent(new Event('change')) 的东西吗？ 这里可能有什么问题吗？

Answer 1

Blazor 不提供内置机制来通知 .NET 运行时有关 JavaScript 所做的 DOM 更改，或将任意 JS 更改与 Blazor 应用程序状态同步。该框架不是为此设计的，通常不建议这样做。

您可以做的是 在完成 JavaScript 更改后使用

JSInterop

调用 C# .NET 方法。提供有关 .NET 运行时更改的信息，然后针对每种可能的更改类型执行以下操作（适用）：

1. 修改

   <span>

   内容：在

   els

   集合中找到正确的项目并更改其

   String

   属性值。
2. 在某个偏移处拆分

   <span>

   ：用具有正确 els

    值的两个新项目替换 

   String

    集合中的相应项目。

3. 将 <span>

    添加到 

   <div>：将新项目添加到 els

   。

在进行服务器端更改时，您可以

覆盖组件的ShouldRender()

方法并暂时禁用重新渲染

，因为浏览器中的 DOM 已经是最新的。