Blazor 编译器如何生成序列号？

Question

Blazor 组件文档建议在构建自定义

RenderTree

时使用常量序列号：

生成序列号丢失了有关 if/else 分支和循环在原始代码中的位置的所有有用信息。这导致 diff 的时间是以前的两倍。 ...在具有复杂和深度嵌套结构的更现实的情况下，尤其是循环，性能成本更加严重。 diff 算法不是立即识别已插入或删除了哪些循环块或分支，而是必须深入递归到渲染树中，并且通常会构建更长的编辑脚本，因为它对新旧结构如何相互关联存在误解。

那么，如果集合的大小无法在编译时确定，那么 Blazor 编译器如何确定枚举元素（即循环中重复的元素）的序列值？

Answer 1

下面是 Blazor 编译器如何使用定义表元素的代码来编译 .razor 文件。请注意，循环内添加的所有元素都具有相同的序列号

protected override void BuildRenderTree(RenderTreeBuilder builder)
            {
                builder.OpenElement(0, "table");
                builder.OpenElement(1, "tbody");

                for (var row = 0; row < 3; row++)
                {
                    builder.OpenElement(2, "tr");
                    for (var col = 0; col < 3; col++)
                    {
                        builder.OpenElement(3, "td");
                        builder.AddAttribute(4, "class", "tictactoe-cell");
                        builder.CloseElement();
                    }

                    builder.CloseElement();
                }

                builder.CloseElement();
                builder.CloseElement();
            }
        }

我建议您使用一些文本（“Blazor！”）定义一个简单的组件，并在另一个组件中动态实例化它，即用户输入文本框的次数。运行一下看看是否有效。现在转到编译器生成的 .g.cs 文件，查看编译器最初生成的内容。来告诉我们你的实验吧。

你的问题非常重要，当我们想要创建例如基于从数据库检索的数据的菜单组件、搜索的配置文件结果列表等时，熟练掌握它是至关重要的。

希望这有帮助...

Answer 2

我知道这是一个老话题...但是 Blazor 中的序列号（至少是 Razor 组件）是行号。当将 Razor 组件“编译”为 C# 时，会生成一个继承自 ComponentBase 的类，并具有相应的 BuildRenderTree 实现，如前面的答案所示。序列号将对应于在 Razor 文件中找到 ui 元素的行号。