StateHasChanged 会重新渲染整个组件还是只渲染变化的部分？

Question

我正在学习Blazor组件，并想知道StateHasChanged是强制组件重新渲染所有内容还是只渲染差异。智能感知报告如下：

通知组件其状态已更改。在适当的情况下，这将导致重新呈现组件。

"这将导致重新呈现组件"是什么意思？

- Leonardo Lurci

---

组件初始呈现后，它会响应事件重新生成其呈现树。然后，Blazor将新的呈现树与先前的呈现树进行比较，并将任何修改应用于浏览器的文档对象模型（DOM）。 - David Yenglin

Answer 1

StateHasChanged会导致只重新呈现差异。

为了证明这一点，我创建了以下具有2个按钮的Blazor组件：

• 第一个按钮生成包含10,000个编号为0..9999的<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字节被传输：

因此，结论是只有“差异”被呈现出来。

- rk72

---

非常感谢你！ - Leonardo Lurci

这也是因为您的组件不包含 Razor 组件，父子组件之间也没有依赖或参数。 - Bellash