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

【问题标题】：Does StateHasChanged re-render all the component or only the differences?StateHasChanged 是重新渲染所有组件还是仅重新渲染差异？
【发布时间】：2019-12-04 02:18:16
【问题描述】：

我正在学习 Blazor 组件，我想知道 StateHasChanged 是否强制组件重新渲染所有自身或仅重新渲染差异。智能感知报告

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

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

【问题讨论】：

From docs.microsoft.com/en-us/aspnet/core/blazor/… -- 组件初始渲染后，组件重新生成其渲染树以响应事件。然后，Blazor 将新的渲染树与之前的渲染树进行比较，并将任何修改应用于浏览器的文档对象模型 (DOM)。

标签： c# blazor

【解决方案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 的开发工具来监控 websocket。在 Network 选项卡上，单击第一个按钮时，我可以看到 1.4 MB 通过 websockets 传输到客户端：

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

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

【讨论】：

非常感谢！
这也是因为你的组件不包含 Razor 组件，父子组件之间没有依赖或参数。