Blazor WeatherForecast示例如何工作? [英] How does the Blazor WeatherForecast sample work?

问题描述

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

The Hello World project template for Blazor includes a Weather Foreacast example (in addition to the Counter increment example).

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

I played around with this to see whats going on behind the scenes. I cant seem to figure it out.

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

Basically, if i comment out the line of code that fetched the weather .json data, then i see "Loading..." indefinitely. Makes sense thus far. But when i run it in its original state, i see "Loading..." then quickly followed by the rendering of the data grid. My confusion is that the rendering of the "Loading..." vs the datagrid is in an if-else statement. So this makes me believe that somehow this if-else is evaluated twice (once on load-time, and 2nd time once the data is loaded).

问题

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

I'd like to know what is going on behind the scenes here:

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

已解决

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

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

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()替代加载的.)

(Note that in the FetchData.cshtml the data is being loaded from OnInitAsync() override.)

推荐答案

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

When you await a method ( OnInitAsync ), you yield control to the calling code, which continue to execute the rest of the code, rendering your component with the text "Loading...". When the Asynchronous method returns, that is, the task is completed, and new parameters are to be set, your control must be re-rendered to reflect the new changes. And of course the if-else statement runs once again, yielding a different result.

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

This actually has nothing to do with Blazor. This is how Asynchronous programming works in C#. However, the code in the ComponentBase class checks this conditions and decides when to re-render the component by calling the StateHasChanged method.

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

See ComponentBase.SetParameters and ComponentBase.ContinueAfterLifecycleTask to understand it better: https://github.com/aspnet/AspNetCore/blob/343208331d9ebbb3a67880133f4139bee2cb1c71/src/Components/src/Microsoft.AspNetCore.Components/ComponentBase.cs

希望这对您有帮助...

Hope this helps...

这篇关于Blazor WeatherForecast示例如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！