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

Question

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

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

基本上，如果我注释掉获取天气 .json 数据的代码行，那么我会无限期地看到“正在加载...”。到目前为止是有道理的。但是当我以原始状态运行它时，我看到“正在加载...”，然后很快就出现了数据网格的渲染。我的困惑是“正在加载...”与数据网格的渲染是在 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

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

希望这有帮助...