Blazor：在 ui 更新时执行不相关的代码块

Question

在下面的示例代码中，我在页面首次初始化并使用“获取计数”按钮的 onclick 事件时将 Counter 组件添加到 counters 一次，我得到 counters 的 Count；

@page "/"

<button @onclick="@(() => count = counters.Count)">get count</button>

<p>Count: @count</p>

@for (int i = 0; i < 1; i++)
{
    counters.Add(new Counter());
}

@code {
    private int count;
    private List<Counter> counters;

    protected override void OnInitialized()
    {
        counters = new List<Counter>();
    }
}

但为什么每次我按下“获取计数”按钮时，count 变量都会加一？（好像 @for 块也被执行）

Blazor WebAssembly 3.2.0

Answer 1

当然@for 块也会被执行。否则，当一个新的 Counter 对象被添加到列表中时，你怎么能让计数变量增加 1。

您应该了解 Blazor 的一个基本方面：UI 事件（例如单击事件）会导致组件重新呈现；因此组件的所有视图部分都被重新渲染。也许你认为只有 lambda 表达式被执行？事实上，所有的视图都是重新渲染的。同样，这是 Blazor 的基本原则，您应该很好地理解它，并在设计组件时将其考虑在内。

无论如何，你不应该像那样实例化组件。组件类被认为是一种特殊情况，因为它们只能作为元素实例化，例如 <Counter/>。这种异常的原因是组件是呈现为 Html DOM 元素的对象，并且在创建时需要对系统进行特殊处理。当您使用 new 关键字创建组件时，不会发生此处理，并且不涉及渲染器对象。

但是，您可以创建对组件的组件引用集合，如下所示：

<Counter @ref="counter1" />

@code
{
   private Counter counter1;
}

希望这对您有所帮助...

Blazor：在 ui 更新时执行不相关的代码块

Blazor: execution of irrelevant code block upon ui update

blazor

blazor-client-side