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。 在 Network 選項卡上，單擊第一個按鈕時，我可以看到 1.4 MB 通過 websockets 傳輸到客戶端：

然后，單擊僅更改第一個元素的第二個按鈕后，我可以看到僅傳輸了 153 個字節：

因此，由此得出的結論是，只有“差異”才會被渲染。