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来跟踪已更改和需要更新的元素。当事件触发时，它会重新生成渲染树并将其与旧的渲染树进行比较以查找更改，然后仅更新DOM中渲染树中的更改项。

组件被渲染为浏览器的文档对象模型（DOM）在内存中的表示形式，称为渲染树，用于以灵活高效的方式更新UI。

在最初渲染组件之后，组件会重新生成   响应事件的渲染树。开拓者然后比较新   根据前一棵树渲染树，并对其进行任何修改   浏览器的文档对象模型（DOM）。

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

Answer 2

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

组件只能创建一次，并且可以重新渲染多次。凯尔（Kyle）的答案中描述了重新渲染的过程以及重新渲染的内容...

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

2 个答案: