在 Blazor 客户端应用程序（razor 组件）中，触发的每个事件都会刷新 UI 吗？

Question

是否在 Blazor 客户端应用程序中触发的每个事件（鼠标、键盘、触摸...）都会导致整个 UI 刷新？在下面的示例中，在每个键输入上， i 都会递增，但它没有绑定到 oninput 事件。

<input type="text" @bind-value="@name" @bind-value:event="oninput"/>
@name
@ComputeResult()

@code {

string name;
int i=0;

public double ComputeResult()
{
    i = i + 1;
    return i;
}

}

Answer 1

只有 DOM 个有变化的元素得到更新，而不是整个 UI。 Blazor 使用他们所谓的 Render Tree 来跟踪已更改和需要更新的元素。当事件触发时，它会重新生成 Render Tree 并将其与旧的进行比较以查找变化，然后仅更新 DOM.

中渲染树中发生变化的项目。

Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree, which is used to update the UI in a flexible and efficient way.

After the component is initially rendered, the component regenerates its render tree in response to events. Blazor then compares the new render tree against the previous one and applies any modifications to the browser's Document Object Model (DOM).

发件人：https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.1

Answer 2

一开始，每当你想重新渲染你的组件时，你必须调用 StateHasChanged 方法作为渲染过程的起点。如今，这不再是必要的了。每当触发 UI 事件（例如 change 或 click 时，都会自动调用 StateHasChanged 方法。如果您将一个空的事件处理程序附加到按钮控件并点击它，StateHasChanged 方法仍会被调用，这会导致重新呈现您的组件，并因此计算表达式 @ComputeResult()。请注意，可以通过覆盖默认 returned 值为 true 的 ComponentBase.ShouldRender 方法来更改此行为。请注意，即使您将此方法重写为 return false，第一个渲染始终会发生。

组件只创建一次，它们可能会被重新渲染多次。 Kyle 的回答中描述了重新渲染过程和重新渲染的内容...

在 Blazor 客户端应用程序（razor 组件）中，触发的每个事件都会刷新 UI 吗？

In Blazor client app (razor component), does every event triggered refresh the UI?

razor

.net-core

razor-pages

blazor

blazor-client-side