Blazor WeatherForecast 示例如何工作？

Question

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

我玩弄了这个来看看幕后发生了什么。我好像搞不懂。

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

问题

我想知道这里的幕后情况：

• if-else 语句是否被多次评估？
• 如果网格异步不为空，它如何评估 null 然后渲染网格？

已解决

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

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

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

Answer 1

当您等待一个方法 ( 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

希望对你有帮助……

Answer 2

if 检查是否为空：

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
     //table here
}

并且数据的加载是异步的。因此，当页面启动时，预测为空。现在加载开始（异步），完成后它将填充预测数组。这将使其非空并显示表格。

我猜异步是这里的关键..