如何避免Blazor组件更新文本时重复遍历列表以优化性能

每次修改num时列表都会重复遍历，本质是组件状态变化触发了整个组件的重新渲染，导致@foreach每次都要重新执行。针对这个问题，这里提供几种实用的解决方案：

方案1：将列表渲染拆分独立子组件（最推荐） #

把列表渲染逻辑封装成单独的子组件，利用Blazor的核心特性——只有当子组件的参数发生变化时，子组件才会重新渲染。父组件的num更新不会影响子组件，自然就不会重复遍历列表。

步骤1：创建子组件（比如命名为ListDisplay.razor） #

@foreach (int x in Items)
{
    @x
    <br />
}

@code {
    [Parameter]
    public List<int> Items { get; set; } = new();
}

步骤2：修改父组件代码 #

<input type="text" value="@num" />
<button type="button" @onclick="UpdateValue">Update TextBox</button> 
<br />
<!-- 用子组件替代原有的foreach逻辑 -->
<ListDisplay Items="lst" />

@code { 
    int num;
    List<int> lst = new List<int>();

    protected override async Task OnInitializedAsync()
    {
        lst.Add(1);
        lst.Add(2);
        lst.Add(3);
        lst.Add(4);
    }

    private void UpdateValue() => this.num = 10;
}

点击按钮更新num时，父组件会重新渲染，但子组件的Items参数没有变化，所以子组件不会重新执行foreach，完美避免了重复遍历。

方案2：缓存列表的RenderFragment #

手动创建并缓存列表的渲染片段，只有当列表本身发生变化时才重新生成片段，状态更新时直接复用缓存的结果。

修改父组件代码如下：

<input type="text" value="@num" />
<button type="button" @onclick="UpdateValue">Update TextBox</button> 
<br />
<!-- 渲染缓存的片段 -->
@_listRenderFragment

@code { 
    int num;
    List<int> lst = new List<int>();
    RenderFragment _listRenderFragment;

    protected override async Task OnInitializedAsync()
    {
        lst.Add(1);
        lst.Add(2);
        lst.Add(3);
        lst.Add(4);
        // 初始化时生成渲染片段
        UpdateListRenderFragment();
    }

    private void UpdateValue() => this.num = 10;

    // 生成列表的渲染片段
    private void UpdateListRenderFragment()
    {
        _listRenderFragment = builder =>
        {
            foreach (int x in lst)
            {
                builder.AddContent(0, x);
                builder.AddMarkupContent(1, "<br />");
            }
        };
    }

    // 如果后续需要更新列表，调用以下方法：
    // private void UpdateList()
    // {
    //     lst.Add(5);
    //     UpdateListRenderFragment();
    //     StateHasChanged();
    // }
}

这种方式适合不想拆分组件的场景，但需要手动管理渲染片段的更新时机。

方案3：自定义事件处理逻辑（进阶） #

通过实现IHandleEvent接口，控制事件处理后的渲染范围，减少不必要的组件刷新。不过这种方式需要对Blazor的渲染机制有一定了解，适合复杂场景：

<input type="text" value="@num" />
<button type="button" @onclick="UpdateValue">Update TextBox</button> 
<br />
@foreach(int x in lst)
{
    @x
    <br />
}

@code { 
    int num;
    List<int> lst = new List<int>();

    protected override async Task OnInitializedAsync()
    {
        lst.Add(1);
        lst.Add(2);
        lst.Add(3);
        lst.Add(4);
    }

    private void UpdateValue() => this.num = 10;

    // 自定义事件处理，只在必要时触发渲染
    Task IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, object arg)
    {
        var task = callback.InvokeAsync(arg);
        var shouldAwait = task.Status != TaskStatus.RanToCompletion && 
                          task.Status != TaskStatus.Canceled;

        // 只更新当前组件，但如果只需要更新输入框，还是拆分组件更清晰
        return shouldAwait ? CallStateHasChangedAfterTask(task) : Task.CompletedTask;
    }

    private async Task CallStateHasChangedAfterTask(Task task)
    {
        try
        {
            await task;
        }
        catch when (task.IsCanceled)
        {
            return;
        }
        catch
        {
            throw;
        }
        // 这里可以根据需求控制是否调用StateHasChanged，或者只更新部分DOM
        StateHasChanged();
    }
}

总结 #

• 优先选择方案1拆分组件，符合Blazor组件化设计，代码简洁易维护。
• 如果不想拆分组件，方案2的RenderFragment缓存是轻量的选择。
• 方案3适合对渲染精度有极高要求的复杂场景，不推荐普通场景使用。

内容的提问来源于stack exchange，提问作者Mariam Louis Aziz