从Blazor开始:应用程序引导和生命周期方法
介绍 我们知道web assembly和c#是如何改变游戏规则的，并将帮助c#在浏览器上运行。所以下一篇文章，让我们看看如何在您的机器上设置Blazor，以及如何开始使用Blazor创建我们的第一个应用程序。 议程 环境设置应用程序自举过程应用程序生命周期方法总结 1. 环境设置 在撰写本文时，微软宣布了新的实验性blazor framework 0.0.4。要得到这个版本，有几个先决条件如下: 安装VS 2017 Preview(15.7)并选择Web Work Bench，而安装最重要的一步是安装blazor的语言服务扩展 为了验证安装，打开Visual Studio，让我们创建一个ASP。NET Core web应用程序。我们将能够看到以下模板: 2. 开始并建立第一个Blazor应用 我们已经完成了设置部分。现在，是时候用Blazor创建我们的第一个演示应用了。我们该怎么做呢?请遵循以下步骤: 用ASP创建一个新项目。将其命名为BlazorDemoApp1并单击Ok。 下一步是使用适当的模板来选择环境。 我们需要确保。net Core被选中。ASP。同样也选择了NET Core 2.0或2.1。下一步是为我们的演示选择Blazor应用程序的模板，我们将选择名为Blazor的模板并按Ok。 3.应用程序启动 我们的应用程序在哪里启动?显然，它是程序中的主要方法。它看起来怎么样?让我们看看下面的代码片段: 使用的代码 隐藏,复制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代码片段: 隐藏,复制Code
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width"> <title>WebApplication2</title> <basehref="/"/> <linkhref="css/bootstrap/bootstrap.min.css"rel="stylesheet"/> <linkhref="css/site.css"rel="stylesheet"/> </head> <body> <app>Loading...</app> <!--Root Component Loads here--> <scripttype="blazor-boot"></script> </body> </html>
在这里，运动靴被用作脚本类型，现在的问题是为什么在index.html中使用它。 因此，当我们在那时构建应用程序时，blaz- boot将被bootstrapping脚本替换，该脚本处理. net运行时并执行应用程序的入口点。下面的截图可以告诉我们在运动靴的位置装载了什么。 在这里，我们可以看到运行。net运行时所需的所有东西都被加载了，我们的应用程序也启动了。 1. 应用生命周期方法 好了，我们已经建立了我们的项目。让我们来挖掘一下Blazor应用程序生命周期方法的细节。Blazor应用程序Blazor提供了大约7种生命周期方法，包括同步和异步生命周期方法。让我们一个一个来看看如何求导。 主要有7种生命周期方法。让我们一个一个来看看。 1. OnInit () 这是应用程序方法的同步版本，在组件初始化时执行，在组件完全加载时执行，我们可以使用此方法从服务加载数据，在此方法之后，UI中的每个控件都被加载。当组件准备就绪并从渲染树中的父组件接收到值时，就会执行此操作。 2. OnInitAsync () 这是应用程序方法的异步版本，在组件初始化时执行，在组件完全初始化时调用。这可用于调用数据服务或从服务加载数据。当组件准备就绪并从渲染树中的父组件接收到值时，就会执行此操作。 3.OnParametersSet () 这是组件从父组件接收参数时设置参数的同步方式，当组件初始化时调用该方法。 4. OnParametersSetAsync () 这是当组件从父组件接收到参数时设置参数的异步方式，当组件初始化时调用该方法。 5. ShouldRender () 我们使用这个方法来阻止刷新UI，如果这个方法返回true，那么UI被刷新，否则更改不会发送到UI，关于ShouldRender()的一件事是，它总是做初始的渲染，尽管它的返回值。 6. OnAfterRender () 现在，我们可以使用这个方法来执行其他步骤，比如初始化其他组件等等。 7. OnAfterRenderAsync () 这个方法是OnAfrerRender()的异步版本，它在呈现所有re时被调用我们可以使用此方法对第三方组件进行额外的初始化。 演示应用程序生命周期的完整代码如下: 隐藏,收缩,复制Code
@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是一种使用web程序集运行应用程序的技术。它使用ASP。NET Core构建应用程序。它与当前的UI框架语言(如React或Angular)有很多相似之处，作为一个c#开发者，它将是构建应用程序，尤其是单页面应用程序的一个很好的平台。虽然不能用于生产系统，但肯定是激动人心的时间与此。😊 参考文献 https://learn-blazor.com/getting-started/what-is-blazor/ https://blogs.msdn.microsoft.com/webdev/2018/03/22/get-started-building-net-web-apps-in-the-browser-with-blazor/|0>>>> 本文转载于：http://www.diyabc.com/frontweb/news17316.html
