大家好，我是码农刚子。本文详细介绍了Blazor框架中的依赖注入机制和状态管理方案。依赖注入部分阐述了服务注册的三种生命周期方式（Singleton/Scoped/Transient）及在组件中的使用方法。状态管理章节系统梳理了7种解决方案：从简单的组件内状态到父子组件通信、级联参数，再到全局状态容器和Flux/Redux模式，并提供了本地存储持久化方案。文章还介绍了@ref指令的使用场景，包括组件引用、元素操作和循环处理等。最后给出了不同场景下的状态管理选择建议，帮助开发者构建更健壮。
一、依赖注入基础
Blazor 提供了强大的依赖注入（Dependency Injection, DI）功能，用于将服务以解耦的方式注入到组件中,它帮助我们实现松耦合的代码设计，提高可测试性和可维护性。
什么是依赖注入？
依赖注入是一种设计模式，它允许类从外部接收其依赖项，而不是自己创建它们。在 Blazor 中，这意味着组件不需要知道如何创建服务，而是通过构造函数或属性接收这些服务。
二、注册和使用服务
1、创建自定义服务
1. 定义服务接口
public interface ICounterService {int Increment(int currentValue);int Decrement(int currentValue);void Reset(); }
2. 实现服务
public class CounterService : ICounterService {public int Increment(int currentValue){return currentValue + 1;}public int Decrement(int currentValue){return currentValue - 1;}public void Reset(){// 重置逻辑 } }
2、注册服务
在 Program.cs 文件中配置服务容器：
var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>("#app");// 注册服务 builder.Services.AddSingleton<ICounterService, CounterService>(); builder.Services.AddScoped<IUserService, UserService>(); builder.Services.AddTransient<IEmailService, EmailService>();// 注册内置服务 builder.Services.AddLocalStorage(); builder.Services.AddAuthorizationCore();await builder.Build().RunAsync();
3、服务生命周期
Blazor 支持三种服务生命周期：
Singleton：整个应用生命周期内只有一个实例Scoped：每个用户会话有一个实例（Blazor Server）或每个浏览器标签页（Blazor WebAssembly）Transient：每次请求时创建新实例
4、在组件中使用依赖注入
1. 使用 [Inject] 特性
@page "/counter" @inject ICounterService CounterService<h3>Counter</h3> <p>Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount = CounterService.Increment(currentCount);} }
2. 在代码中使用注入的服务
@page "/user-profile" @inject IUserService UserService @inject NavigationManager Navigation<h3>User Profile</h3>@if (user != null) {<div><p>Name: @user.Name</p><p>Email: @user.Email</p></div> }@code {private User user;protected override async Task OnInitializedAsync(){user = await UserService.GetCurrentUserAsync();}private async Task UpdateProfile(){await UserService.UpdateUserAsync(user);Navigation.NavigateTo("/success");} }
5、高级依赖注入用法
1. 工厂模式注册
builder.Services.AddSingleton<ICounterService>(provider => {// 复杂的创建逻辑return new CounterService(); });
2. 选项模式
// 配置选项类 public class ApiOptions {public string BaseUrl { get; set; }public int TimeoutSeconds { get; set; } }// 注册选项 builder.Services.Configure<ApiOptions>(options => {options.BaseUrl = "https://api.example.com";options.TimeoutSeconds = 30; });// 在服务中使用 public class ApiService {private readonly ApiOptions _options;public ApiService(IOptions<ApiOptions> options){_options = options.Value;} }
3. 条件注册
#if DEBUG builder.Services.AddSingleton<ILogger, DebugLogger>(); #else builder.Services.AddSingleton<ILogger, ProductionLogger>(); #endif
三、组件状态管理
在Blazor开发中，状态管理是构建交互式Web应用的核心挑战。无论是简单的计数器组件还是复杂的实时协作系统，选择合适的状态管理方案直接影响应用性能和可维护性。
1、理解Blazor中的状态管理
- 状态是指应用程序或组件在某一时刻的数据或信息。例如，一个计数器组件可以有一个表示当前计数值的状态，一个表单组件可以有一个表示用户输入的状态，一个购物车组件可以有一个表示选中商品的状态等。状态管理是指如何存储、更新、获取和传递这些数据或信息。
- 在Blazor中，每个组件都有自己的私有状态，它只能被该组件访问和修改。如果要将状态从一个组件传递给另一个组件，或者在多个组件之间共享状态，就需要使用一些技术或模式来实现。下面我们将介绍一些常见的方法。
2、组件内状态：最简单的状态管理
Blazor组件最基础的状态管理方式是使用组件内部的字段或属性保存状态。这种模式适用于状态仅在单个组件内部使用且无需共享的场景，如计数器、表单输入等基础交互。
@page "/counter"<h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount++;} }
上述代码展示了典型的组件内状态模式，currentCount字段存储计数器状态，IncrementCount方法修改状态并自动触发UI重新渲染。这种模式的优势在于实现简单、零外部依赖，适合快速开发独立功能组件。
3、父子组件通信：参数和事件回调
如果要将父组件的状态传递给子组件，或者从子组件获取更新后的状态，可以使用参数和属性来实现。
参数是指父组件向子组件传递数据或信息的方式。参数可以是任意类型的值，例如字符串、数字、布尔值、对象、委托等。要定义一个参数，需要在子组件中使用[Parameter]特性来标记一个公共属性，并且该属性的类型必须与父组件传递的值相同。例如：
这样就定义了一个名为Counter的参数，在子组件中可以使用以下语法来获取它的值：
<p>The counter value is @Counter</p>
在父组件中，可以使用以下语法来为参数赋值：
<CounterComponent Counter="@currentCount" />@code {private int currentCount = 0; }
这样就将父组件中的变量currentCount作为参数值传递给了子组件。如果要实现从父到子单向绑定。
属性是指子组件向父组件传递数据或信息的方式。属性可以是任意类型的值，但通常是一个事件回调（EventCallback）或一个动作（Action），用于在子组件中触发父组件定义的一个方法，从而将数据或信息传递给父组件。要定义一个属性，需要在子组件中使用[Parameter]特性来标记一个公共属性，并且该属性的类型必须是EventCallback<T>或Action<T>，其中T是要传递的数据或信息的类型。例如：
<h3>CounterComponent</h3> <p>The counter value is @Counter</p> <button @onclick="CounterChangedFromChild">Update Counter from Child</button> @code {[Parameter]public int Counter { get; set; }[Parameter]public EventCallback<int> OnCounterChanged { get; set; }private async Task CounterChangedFromChild(){Counter++;await OnCounterChanged.InvokeAsync(Counter); }}
以上例子中就定义了一个名为OnCounterChanged的属性，将子组件中的变量Counter作为参数传递给了父组件。在父组件中，可以使用以下语法来为属性赋值：
<CounterComponent OnCounterChanged="HandleCounterChanged" />
这样就将父组件中定义的一个方法名作为属性值传递给了子组件。该方法必须接受一个与属性类型相同的参数，并且可以在其中处理数据或信息。例如：
@code{private void HandleCounterChanged(int counter){Console.WriteLine($"The counter value is {counter}");} }
这样就实现了从子到父单向传递数据或信息，并且可以在任何时候触发。
使用组件参数和属性传递状态：适合父子组件之间的简单状态传递，可以使用[Parameter]或者级联参数[CascadingParameter]特性来标记组件参数，并且使用<Component Parameter="Value" />或者<CascadingValue Value="Value"><Component /></CascadingValue>语法来传递状态。
4、级联参数和值
<!-- AppStateProvider.razor --> <CascadingValue Value="this">@ChildContent </CascadingValue>@code {[Parameter]public RenderFragment? ChildContent { get; set; }private string theme = "light";public string Theme{get => theme;set{if (theme != value){theme = value;StateHasChanged();}}}public event Action? OnThemeChanged;public void ToggleTheme(){Theme = Theme == "light" ? "dark" : "light";OnThemeChanged?.Invoke();} }
<!-- ConsumerComponent.razor --> <div class="@($"app-{appState.Theme}")"><h3>当前主题: @appState.Theme</h3><button @onclick="appState.ToggleTheme">切换主题</button> </div>@code {[CascadingParameter]public AppStateProvider appState { get; set; } = default!;protected override void OnInitialized(){if (appState != null){appState.OnThemeChanged += StateHasChanged;}}public void Dispose(){if (appState != null){appState.OnThemeChanged -= StateHasChanged;}} }
5、状态容器模式（全局状态）
创建状态容器服务
// Services/AppState.cs public class AppState {private int _counter;private string _userName = string.Empty;public int Counter{get => _counter;set{_counter = value;OnCounterChanged?.Invoke();}}public string UserName{get => _userName;set{_userName = value;OnUserNameChanged?.Invoke();}}public event Action? OnCounterChanged;public event Action? OnUserNameChanged;public void IncrementCounter(){Counter++;} }
注册服务
// Program.cs builder.Services.AddScoped<AppState>();
在组件中使用
@inject AppState AppState @implements IDisposable<h3>计数器: @AppState.Counter</h3> <h4>用户: @AppState.UserName</h4><button @onclick="AppState.IncrementCounter">增加计数</button> <input @bind="localUserName" @bind:event="onchange" placeholder="输入用户名" />@code {private string localUserName{get => AppState.UserName;set{AppState.UserName = value;// 可以在这里添加其他逻辑 }}protected override void OnInitialized(){AppState.OnCounterChanged += StateHasChanged;AppState.OnUserNameChanged += StateHasChanged;}public void Dispose(){AppState.OnCounterChanged -= StateHasChanged;AppState.OnUserNameChanged -= StateHasChanged;} }
6、Flux/Redux 模式
什么是Flux模式？
Flux是一种应用程序架构模式，专门用于管理前端应用中的状态。与常见的MVC模式不同，Flux采用单向数据流的设计，使得状态变化更加可预测和易于追踪。
Flux模式的核心思想是将状态管理与UI渲染分离，通过严格的规则来规范状态变更的过程。这种模式最初由Facebook提出，后来被Redux等库实现，而Fluxor则是专门为Blazor应用设计的实现方案。
Flux模式的核心原则
- 状态只读原则
应用的状态在任何情况下都不应该被直接修改，这保证了状态变更的可控性。
- 动作驱动变更
任何状态变更都必须通过派发(dispatch)一个动作(action)来触发。动作是一个简单的对象，描述了发生了什么变化。
- 纯函数处理
使用称为"reducer"的纯函数来处理动作，根据当前状态和动作生成新状态。Reducer不会修改原有状态，而是返回全新的状态对象。
- 单向数据流
UI组件订阅状态变化，当状态更新时自动重新渲染。用户交互则通过派发动作来触发状态变更，形成完整的单向循环。
核心概念
- 状态（State）：定义应用数据模型，不可直接修改，需通过动作（Action）触发更新。
- 动作（Action）：描述状态变更意图的对象，包含类型标识和有效载荷。
- 归约器（Reducer）：纯函数，根据当前状态和动作生成新状态。
- 效果（Effect）：处理副作用操作（如 API 调用），监听动作并执行异步任务。
- 中间件(Middleware)：中间件可以在动作被派发到reducer之前或之后执行自定义逻辑，用于日志记录、性能监控等横切关注点。
使用 Fluxor 库
首先安装 Fluxor：
Install-Package Fluxor.Blazor.Web
定义状态和动作
// Store/CounterState.cs public record CounterState {public int Count { get; init; } }// Store/Actions/IncrementCounterAction.cs public record IncrementCounterAction;// Store/Reducers/CounterReducers.cs public static class CounterReducers {[ReducerMethod]public static CounterState OnIncrementCounter(CounterState state, IncrementCounterAction action){return state with { Count = state.Count + 1 };} }
在组件中使用
@using Fluxor @inherits Fluxor.Blazor.Web.Components.FluxorComponent<h3>计数器: @State.Value.Count</h3> <button @onclick="Increment">增加</button>@code {[Inject]private IState<CounterState> State { get; set; } = null!;[Inject]private IDispatcher Dispatcher { get; set; } = null!;private void Increment(){Dispatcher.Dispatch(new IncrementCounterAction());} }
7、本地存储持久化
使用 Blazor 本地存储
@page "/counter2" @inject IJSRuntime JSRuntime<h3>持久化计数器: @count</h3> <button @onclick="Increment">增加并保存</button>@code {private int count = 0;private bool isInitialized = false;protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){await LoadFromStorage();isInitialized = true;StateHasChanged(); // 确保在加载后更新UI }}private async Task Increment(){count++;await SaveToStorage();//StateHasChanged(); }private async Task SaveToStorage(){if (isInitialized){await JSRuntime.InvokeVoidAsync("localStorage.setItem", "counter", count);}}private async Task LoadFromStorage(){try{var savedCount = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "counter");if (int.TryParse(savedCount, out int result)){count = result;}}catch (Exception ex){// 处理预渲染期间的 JS 互操作错误Console.WriteLine($"加载存储时出错: {ex.Message}");}}}
8、状态管理选择指南
四、使用 @ref 引用组件
在 Blazor 中，@ref 指令用于获取对组件或 HTML 元素的引用，让你能够在代码中直接操作它们。以下是详细的使用方法：
1、引用组件
基本用法
<!-- MyComponent.razor --> <h3>计数器: @count</h3> <button @onclick="Increment">增加</button>@code {private int count = 0;public void Increment(){count++;StateHasChanged();}public void Reset(){count = 0;StateHasChanged();} }
<!-- ParentComponent.razor --> @page "/parent"<MyComponent @ref="myComponentRef" /> <button @onclick="ResetChild">重置子组件</button>@code {private MyComponent? myComponentRef;private void ResetChild(){myComponentRef?.Reset();} }
2、引用 HTML 元素
@page "/element-ref"<input @ref="usernameInput" placeholder="输入用户名" /> <button @onclick="FocusInput">聚焦输入框</button>@code {private ElementReference usernameInput;private async Task FocusInput(){await usernameInput.FocusAsync();} }
3、在循环中使用 @ref
@page "/loop-ref-example"<h3>循环中使用 ref 示例</h3><button @onclick="ShowAllMessages" class="btn btn-primary">显示所有消息</button> <button @onclick="UpdateAllMessages" class="btn btn-secondary">更新所有消息</button>@foreach (var item in items) {<ChildComponent @ref="componentRefs[item.Id]"Id="item.Id"Message="@item.Message"OnMessageChanged="HandleMessageChanged" /> }@code {private List<ItemModel> items = new();private Dictionary<int, ChildComponent?> componentRefs = new();protected override void OnInitialized(){items = new List<ItemModel>{new ItemModel { Id = 1, Message = "第一条消息" },new ItemModel { Id = 2, Message = "第二条消息" },new ItemModel { Id = 3, Message = "第三条消息" }};// 预先初始化字典foreach (var item in items){componentRefs[item.Id] = null;}}private void ShowAllMessages(){foreach (var component in componentRefs.Values){component?.ShowCurrentMessage();}}private void UpdateAllMessages(){foreach (var item in items){if (componentRefs.TryGetValue(item.Id, out var component) && component != null){component.UpdateMessage($"更新后的消息 {item.Id}");}}}private void HandleMessageChanged((int Id, string Message) data){Console.WriteLine($"收到消息更新 - ID: {data.Id}, 消息: {data.Message}");var item = items.FirstOrDefault(i => i.Id == data.Id);if (item != null){item.Message = data.Message;StateHasChanged();}}public class ItemModel{public int Id { get; set; }public string Message { get; set; } = string.Empty;} }
<!-- ChildComponent.razor --> <div class="child-component"><h5>子组件 ID: @Id</h5><p>当前消息: <strong>@Message</strong></p><input @bind="currentMessage" @bind:event="oninput" /><button @onclick="UpdateMessage" class="btn btn-sm btn-info">更新消息</button> </div>@code {[Parameter]public int Id { get; set; }[Parameter]public string Message { get; set; } = string.Empty;[Parameter]public EventCallback<(int Id, string Message)> OnMessageChanged { get; set; }private string currentMessage = string.Empty;protected override void OnParametersSet(){currentMessage = Message;}private async Task UpdateMessage(){await OnMessageChanged.InvokeAsync((Id, currentMessage));}public void ShowCurrentMessage(){Console.WriteLine($"组件 {Id} 的消息: {Message}");}public void UpdateMessage(string newMessage){currentMessage = newMessage;UpdateMessage().Wait();} }
4、使用 ref 回调
<CustomInput @ref="SetInputRef" />@code {private CustomInput? inputRef;private void SetInputRef(CustomInput component){inputRef = component;// 组件引用设置后的初始化逻辑component?.Initialize();} }
5、与 JavaScript 互操作
@inject IJSRuntime JSRuntime<div @ref="myDiv" style="width: 100px; height: 100px; background: red;"></div> <button @onclick="ChangeDivStyle">修改样式</button>@code {private ElementReference myDiv;private async Task ChangeDivStyle(){await JSRuntime.InvokeVoidAsync("changeElementStyle", myDiv);} }
对应的 JavaScript 文件：
// wwwroot/js/site.js window.changeElementStyle = (element) => {element.style.background = 'blue';element.style.width = '200px'; };
本章节中用到：IJSRuntime ，后面会详细讲解。
以上就是关于《ASP.NET Core Blazor 核心功能一：Blazor依赖注入与状态管理指南》的全部内容，希望你有所收获。关注我，持续分享。
