c# - StateHasChanged 是重新渲染所有组件还是仅重新渲染差异？

Question

我正在学习 Blazor 组件，我想知道 StateHasChanged 会强制组件重新呈现所有自身还是仅重新呈现差异。智能感知报告指出

Notifies the component that its state has changed. When applicable, this will cause the component to be re-rendered.

“这将导致组件被重新渲染”是什么意思？

Answer 1

StateHasChanged 只会导致重新渲染差异。

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

第一个按钮生成一个包含 10 000 个 <li> 元素的列表，编号为 0 .. 9999

第二个按钮修改第一个<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.4 MB 通过 websockets 传输到客户端:



然后，单击仅更改第一个元素的第二个按钮后，我可以看到仅传输了 153 个字节:



因此，由此得出的结论是只有“差异”才会被渲染。