时间戳

首页 > 解决方案 > Blazor WeatherForecast 示例如何工作？

asp.net - Blazor WeatherForecast 示例如何工作？

问题描述

Blazor 的 Hello World 项目模板包括一个天气预报示例（除了计数器增量示例）。

我玩弄了这个，看看幕后发生了什么。我似乎无法弄清楚。

基本上，如果我注释掉获取天气 .json 数据的代码行，那么我会无限期地看到“正在加载...”。到目前为止是有道理的。但是当我以原始状态运行它时，我看到“正在加载...”，然后很快呈现数据网格。我的困惑是“正在加载...”与数据网格的呈现是在 if-else 语句中。所以这让我相信这个 if-else 以某种方式被评估了两次（加载时一次，加载数据后第二次）。

问题

我想知道这里的幕后发生了什么：

解决

我在这里找到了答案。 我的怀疑是正确的——页面确实被渲染了两次。关键在于组件的生命周期。

首先调用 OnInit，然后调用 OnInitAsync。任何需要组件在完成后重新渲染的异步操作都应该放在 OnInitAsync 方法中。

（请注意，在 FetchData.cshtml 中，数据是从 OnInitAsync() 覆盖加载的。）

标签： asp.netblazor

解决方案

当您等待一个方法 ( OnInitAsync ) 时，您将控制权交给调用代码，调用代码继续执行其余代码，并使用文本“正在加载...”呈现您的组件。当异步方法返回时，即任务完成，并且要设置新参数时，您的控件必须重新呈现以反映新的更改。当然 if-else 语句再次运行，产生不同的结果。

这实际上与 Blazor 无关。这就是异步编程在 C# 中的工作方式。但是，ComponentBase 类中的代码检查此条件并通过调用 StateHasChanged 方法决定何时重新呈现组件。

请参阅 ComponentBase.SetParameters 和 ComponentBase.ContinueAfterLifecycleTask 以更好地理解它：https ://github.com/aspnet/AspNetCore/blob/343208331d9ebbb3a67880133f4139bee2cb1c71/src/Components/src/Microsoft.AspNetCore.Components/ComponentBase.cs

希望这可以帮助...

推荐阅读