Blazor组件添加待办项后无序列表更新的触发与调用机制

我正在学习ASP.NET Core 6.0的Blazor教程，以下是教程中的Todo组件代码：

@page "/todo"

<PageTitle>Todo</PageTitle>

<h1>Todo</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>@todo.Title</li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private List<TodoItem> todos = new();
    private string? newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

疑问解答 #

疑问1：带输入字段数据绑定的Blazor组件中，无序列表更新的原因是什么？ #

Blazor的核心是状态驱动渲染：当组件的状态（比如todos集合、newTodo变量）发生变化时，框架会自动触发组件重新渲染。点击"Add todo"按钮调用AddTodo方法后，todos集合新增了待办项，同时newTodo被重置为空字符串，这两处状态变更都会触发组件重新渲染，无序列表的@foreach循环会重新执行，从而更新列表内容。

另外输入框的@bind是双向绑定，输入内容时newTodo会实时更新，但此时todos没变化，列表不会更新；只有当点击添加按钮改变todos状态后，列表才会跟着更新。

疑问2：添加待办项时无序列表为何会被调用？该列表代码不在事件处理器中，我原以为仅浏览器页面加载/刷新时才会执行，想了解其调用机制。 #

这是Blazor声明式渲染特性的表现：

• 组件的UI代码（包括<ul>和@foreach部分）不是只在页面加载时执行一次，而是作为组件渲染逻辑的一部分，会在组件初始化、状态发生变化时重复执行。
• 点击按钮触发AddTodo事件处理器后，方法内修改了组件的核心状态（todos集合和newTodo），Blazor检测到状态变更后，会重新执行整个组件的渲染逻辑——也就是重新解析并执行UI部分的代码，自然会重新遍历todos生成列表项。
• 这种机制不需要手动操作DOM更新，框架会自动对比前后渲染的UI差异，只更新需要变化的部分（比如新增的<li>元素），而非刷新整个页面。

内容的提问来源于stack exchange，提问作者AtomicallyBeyond