深入理解Blazor组件生命周期（从零开始掌握C# Blazor生命周期钩子）

什么是 Blazor 组件生命周期？

Blazor 组件生命周期是指一个组件从被创建、渲染、更新到最终被销毁的整个过程。在这个过程中，Blazor 提供了多个“钩子”（即方法），允许你在特定时间点执行自定义逻辑。

Blazor 生命周期钩子详解

Blazor 组件主要有以下生命周期方法（按执行顺序排列）：

1. OnInitialized / OnInitializedAsync：组件初始化时调用。
2. OnParametersSet / OnParametersSetAsync：当组件接收到参数并设置后调用。
3. OnAfterRender / OnAfterRenderAsync：组件完成渲染后调用。
4. Dispose（需实现 IDisposable）：组件销毁前清理资源。

1. OnInitialized 和 OnInitializedAsync

这是组件首次创建时最先调用的方法。通常用于初始化变量、加载数据等操作。

@page "/counter"<h3>计数器示例</h3><p>当前值: @currentCount</p>@code {    private int currentCount = 0;    protected override void OnInitialized()    {        // 初始化操作        currentCount = LoadInitialValue();    }    private int LoadInitialValue()    {        // 模拟从本地存储加载初始值        return 5;    }}

2. OnParametersSet 和 OnParametersSetAsync

当父组件向子组件传递参数（使用 [Parameter] 标记）时，这些方法会在参数被赋值后自动调用。

<!-- Parent.razor --><ChildComponent Title="欢迎学习 Blazor 组件生命周期" /><!-- ChildComponent.razor --><h4>@Title</h4>@code {    [Parameter]    public string Title { get; set; } = string.Empty;    protected override void OnParametersSet()    {        if (string.IsNullOrEmpty(Title))        {            Title = "默认标题";        }    }}

3. OnAfterRender 和 OnAfterRenderAsync

在组件完成 DOM 渲染后调用。常用于操作 DOM 元素（例如使用 JavaScript 交互）或触发第三方库。

@inject IJSRuntime JS<div @ref="myDiv">等待渲染...</div>@code {    private ElementReference myDiv;    protected override async Task OnAfterRenderAsync(bool firstRender)    {        if (firstRender)        {            // 首次渲染后执行 JS            await JS.InvokeVoidAsync("highlightElement", myDiv);        }    }}

4. Dispose（资源清理）

当组件被移除时，如果实现了 IDisposable 接口，Dispose 方法会被调用，用于释放事件监听器、取消订阅等。

@implements IDisposable@code {    private Timer? timer;    protected override void OnInitialized()    {        timer = new Timer(_ => StateHasChanged(), null, 0, 1000);    }    public void Dispose()    {        timer?.Dispose();    }}

常见问题与最佳实践

• 避免在 OnAfterRender 中修改状态并调用 StateHasChanged()，除非使用 firstRender 判断，否则可能引发无限循环。
• 异步操作优先使用 Async 版本的生命周期方法（如 OnInitializedAsync）。
• 及时释放资源，防止内存泄漏，特别是在使用定时器、事件订阅等场景。

总结

掌握 Blazor 组件生命周期 是构建高性能 Blazor 应用的基础。通过合理使用 Blazor 生命周期钩子，你可以精确控制组件的行为，提升用户体验。

希望这篇 C# Blazor 教程 能帮助你理解 OnInitialized 等关键方法的使用场景。动手实践是掌握知识的最佳方式，快去创建你的第一个 Blazor 组件吧！

关键词提示：Blazor组件生命周期、Blazor生命周期钩子、C# Blazor教程、Blazor OnInitialized