Blazor WeatherForecast 示例如何工作？

Question

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

我试了一下这个，看看幕后发生了什么。我好像想不通。

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

问题

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

if-else 语句是否被计算了不止一次？
它还能如何评估 null，然后在其异步非 null 时呈现网格？

已解决

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

OnInit is called first, then OnInitAsync. Any asynchronous operations, which require the component to re-render once they complete, should be placed in the OnInitAsync method.

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

Answer 1

if 检查为空：

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

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

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

Answer 2

当您等待一个方法 (OnInitAsync) 时，您将控制权交给调用代码，调用代码继续执行其余代码，使用文本 "Loading..." 呈现您的组件。当异步方法returns，即任务完成，要设置新的参数时，你的控件必须重新渲染以反映新的变化。当然，if-else 语句再次运行，产生不同的结果。

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

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

希望这对您有所帮助...

Blazor WeatherForecast 示例如何工作？

How does the Blazor WeatherForecast sample work?

asp.net

blazor