一、依赖注入基础
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 库
