入门 Blazor：应用程序启动和生命周期方法
4.60/5 (5投票s)
如何开始使用 Blazor：应用程序启动和生命周期方法
引言
我们知道 WebAssembly 和 C# 如何能够改变游戏规则，并帮助 C# 在浏览器中运行。因此，在下一篇文章中，让我们看看如何在你的机器上设置 Blazor，以及如何开始使用你的第一个 Blazor 应用程序。
议程
- 环境设置
- 应用程序引导过程
- 应用程序生命周期方法
- 结论
1. 环境设置
在撰写本文时，Microsoft 发布了新的实验性 Blazor 框架 0.0.4。要获取此版本，有一些先决条件如下：
- 在此处安装 .NET Core SDK 2.1，链接为 这里
- 安装 VS 2017 预览版 (15.7)，并在安装时选择 Web 工作负载。
- 最重要的一步是安装 Blazor 的语言服务扩展，链接为 这里
要验证安装，请打开 Visual Studio，然后创建一个 ASP.NET Core Web 应用程序。我们将能够看到以下模板：
2. 入门和构建第一个 Blazor 应用
我们已经完成了设置部分。现在，是时候使用 Blazor 创建我们的第一个演示应用程序了。我们该如何做？请遵循以下步骤：
- 创建一个新的项目，选择 ASP.NET Core Web 应用程序，将其命名为
BlazorDemoApp1，然后单击“确定”。
- 下一步是使用适当的模板选择环境。
- 我们需要确保已选择 .NET Core。同时也要选择 ASP.NET Core 2.0 或 2.1。
- 下一步是为我们的演示 Blazor 应用程序选择模板，我们将选择名为 Blazor 的模板，然后按“确定”。
3. 应用程序引导
我们的应用程序在哪里引导？显然，它在 Program.cs 中的 Main 方法。它看起来怎么样？让我们看下面的代码片段：
Using the Code
public class Program
{
static void Main(string[] args)
{
var serviceProvider = new BrowserServiceProvider(services =>
{
// Add any custom services here
});
new BrowserRenderer(serviceProvider).AddComponent<App>("app");
}
}
这是我们决定在此加载哪个组件的地方，DOM 元素选择器参数将决定我们是否要加载根组件。在我们的例子中，index.html 中的 app 元素将用于渲染。
Main 方法可用于添加将在应用程序后续部分中使用的各种服务，以进行 DI（依赖注入）。
当我们看到 index.html 的代码片段时，它是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>WebApplication2</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app> <!--Root Component Loads here-->
<script type="blazor-boot"></script>
</body>
</html>
在这里，Blazor-boot 被用作脚本类型，现在的问题是为什么它在这里的 index.html 中使用。
因此，当我们构建应用程序时，blazor-boot 会被引导脚本替换，该脚本处理 .NET 运行时并执行应用程序的入口点。下面的屏幕截图可以告诉我们 blazor-boot 的位置加载了什么。
在这里，我们可以看到运行 .NET 运行时所需的所有东西都已加载，并且我们的应用程序已引导。
1. 应用程序生命周期方法
好的，我们已经设置了我们的项目。让我们深入了解 Blazor 应用程序的应用程序生命周期方法的详细信息。Blazor 应用程序中有大约 7 种生命周期方法。Blazor 提供了同步和异步生命周期方法。让我们一一了解它们之间的区别。
主要有 7 种生命周期方法。让我们一一了解所有这些方法。
1. OnInit ()
这是应用程序方法的同步版本，在组件初始化时执行。当组件完全加载时执行。我们可以使用此方法从服务加载数据，因为在此方法之后，UI 中的每个控件都已加载。当组件准备好并从渲染树接收到父组件的值时执行。
2. OnInitAsync ()
这是应用程序方法的异步版本，在组件初始化时执行。当组件完全初始化时调用。可用于调用数据服务或从服务加载数据。当组件准备好并从渲染树接收到父组件的值时执行。
3. OnParametersSet ()
这是设置参数的同步方式，当组件从其父组件接收到参数时调用。当组件初始化时调用。
4. OnParametersSetAsync ()
这是设置参数的异步方式，当组件从父组件接收到参数时调用。当组件初始化时调用。
5. ShouldRender ()
我们使用此方法来抑制 UI 的刷新。如果此方法返回 true，则 UI 会刷新，否则更改不会发送到 UI。关于 ShouldRender() 的一点是，无论其返回值如何，它总是执行初始渲染。
6. OnAfterRender ()
每次组件完成渲染后都会调用此方法。组件的所有引用都已填充。我们可以利用此方法执行其他步骤，例如初始化其他组件等。
7. OnAfterRenderAsync ()
此方法是 OnAfrerRender() 的异步版本，当组件的所有引用都已填充后调用。我们可以使用此方法对第三方组件进行额外的初始化。
演示应用程序生命周期的完整代码如下：
@page "/"
<h1>Application Life cycle Methods ..</h1>
@foreach (var item in EventType){ @item <hr />}
@functions{
List<string> EventType = new List<string>();
protected override void OnInit()
{
EventType.Add(" 1 OnInit");
}
protected override async Task OnInitAsync()
{
EventType.Add("2 OnInit Async");
await Task.Delay(1000);
}
protected override void OnParametersSet()
{
EventType.Add("3 On Parameter set ");
}
protected override async Task OnParametersSetAsync()
{
EventType.Add(" 4 OnParametersSet Async Started");
await Task.Delay(1000);
}
protected override bool ShouldRender()
{
EventType.Add(" 5 Should render called");
return true;
}
protected override void OnAfterRender()
{
EventType.Add(" 6 OnAfterRenderStarted");
}
protected override async Task OnAfterRenderAsync()
{
EventType.Add(" 7 OnAfterRender Async Started");
await Task.Delay(1000);
}
}
运行上述代码，我们将得到如下输出：
我们可以看到步骤以及它们被调用的一次和应用程序方法的顺序。
结论
Blazor 是一项利用 WebAssembly 运行应用程序的技术。它使用 ASP.NET Core 来构建应用程序。它与当前的 UI 框架语言（如 React 或 Angular）有很多相似之处。对于 C# 开发人员来说，它将是一个构建应用程序（尤其是单页应用程序）的绝佳平台。虽然尚未适用于生产系统，但可以肯定的是，令人兴奋的未来就在眼前。😊