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

Question

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

通知组件其状态已更改。如果适用，这将导致重新渲染组件。

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

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。在“网络”选项卡上，单击第一个按钮时，我可以看到 1.4 MB 通过 websockets 传输到客户端：

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

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