ASP.NET Core Blazor 核心功能一：Blazor依赖注入与状态管理指南-阿里云开发者社区

大家好，我是码农刚子。本文详细介绍了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、状态管理选择指南

场景	推荐方案	说明
简单组件状态	组件内部状态	状态仅在单个组件内使用
父子组件通信	参数 + 事件回调	直接的组件层级关系
深层组件树	级联参数	避免层层传递参数
跨组件状态共享	状态容器服务	多个组件需要访问相同状态
复杂应用状态	Fluxor/Redux	大型应用，需要可预测的状态管理
持久化需求	本地存储 + 状态容器	需要跨会话保持状态

四、使用 `@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依赖注入与状态管理指南》的全部内容，希望你有所收获。关注、点赞，持续分享。

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

ASP.NET Core Blazor 核心功能一：Blazor依赖注入与状态管理指南

一、依赖注入基础

什么是依赖注入？

二、注册和使用服务

1、创建自定义服务

1. 定义服务接口

2. 实现服务

2、注册服务

3、服务生命周期

4、在组件中使用依赖注入

1. 使用 [Inject] 特性

2. 在代码中使用注入的服务

5、高级依赖注入用法

1. 工厂模式注册

2. 选项模式

3. 条件注册

三、组件状态管理

1、理解Blazor中的状态管理

2、组件内状态：最简单的状态管理

3、父子组件通信：参数和事件回调

4、级联参数和值

5、状态容器模式（全局状态）

创建状态容器服务

注册服务

在组件中使用

6、Flux/Redux 模式

什么是Flux模式？

Flux模式的核心原则

核心概念

使用 Fluxor 库

定义状态和动作

在组件中使用

7、本地存储持久化

使用 Blazor 本地存储

8、状态管理选择指南

四、使用 @ref 引用组件

1、引用组件

2、引用 HTML 元素

3、在循环中使用 @ref

4、使用 ref 回调

5、与 JavaScript 互操作

热门文章

最新文章

相关电子书

1. 使用 `[Inject]` 特性

四、使用 `@ref` 引用组件