我正在学习Blazor组件,并想知道StateHasChanged是强制组件重新渲染所有内容还是只渲染差异。智能感知报告如下:
通知组件其状态已更改。在适当的情况下,这将导致重新呈现组件。
"这将导致重新呈现组件"是什么意思?
StateHasChanged会导致只重新呈现差异。
为了证明这一点,我创建了以下具有2个按钮的Blazor组件:
<li>
元素的列表<li>
的值并调用StateHasChanged()以下是完整代码:
@page "/BigDataStateHasChanged"
<h3>BigDataStateHasChanged</h3>
<button class="btn btn-primary" @onclick="GenerateBigData">Generate big data</button>
<button class="btn btn-primary" @onclick="ChangeOneRow">Change 1 row</button>
@if(list != null)
{
@foreach(var item in list)
{
<li>@item</li>
}
}
@code {
List<int> list;
const int cMaxNumbers = 10000;
protected void GenerateBigData()
{
list = new List<int>(cMaxNumbers);
for(int i = 0; i < cMaxNumbers; i++)
{
list.Add(i);
}
}
protected void ChangeOneRow()
{
list[0] = 123456;
StateHasChanged();
}
}
我使用了Chrome的开发者工具来监控websockets。在Network选项卡中,当点击第一个按钮时,我可以看到1.4MB通过websockets传输到客户端:
然后,在点击仅更改第一个元素的第二个按钮后,我可以看到只有153字节被传输:
因此,结论是只有“差异”被呈现出来。