在Blazor客户端应用程序(剃刀组件)中,是否触发的每个事件都会刷新UI?

在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;
}

}
jingyangliwei 回答:在Blazor客户端应用程序(剃刀组件)中,是否触发的每个事件都会刷新UI?

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

  

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

     

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

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

,

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

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

本文链接:https://www.f2er.com/2974191.html

大家都在问