Question

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

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

基本上，如果我注释掉获取天气.json数据的代码行，那么我会无限期地看到“正在加载...”。到目前为止是有意义的。但是，当我在其原始状态下运行它时，我看到“正在加载...”，然后迅速跟随数据网格的呈现。我的困惑是，“加载中...”与数据网格的呈现在if-else语句中。因此，这使我相信以某种方式对if-else进行两次评估（一次加载时间，一次加载数据第二次）。

问题

我想知道这里幕后发生的事情：

if-else语句是否被多次评估？
它还可以如何评估null并在异步非null的情况下呈现网格？

已解决

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

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

（请注意，在FetchData.cshtml中，数据是通过OnInitAsync（）替代加载的。）

Answer 1

当您等待方法（OnInitAsync）时，您将控制权交给了调用代码，该代码将继续执行其余代码，并以文本“ Loading ...”呈现您的组件。当异步方法返回时，即任务完成，并且要设置新参数时，必须重新呈现控件以反映新更改。当然，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
}

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

我猜这里是异步的关键。

Blazor WeatherForecast示例如何工作？

2 个答案: