时间戳

首页 > 解决方案 > 在 Blazor ComponentBase 类中获取数据

blazor - 在 Blazor ComponentBase 类中获取数据

问题描述

每个 Blazor 组件都有一个OnInitializedAsync()可以重写的方法。它似乎是任何调用获取组件渲染期间应使用的数据的好地方，例如：

protected override async Task OnInitializedAsync()
{
    var dataForRendering = await SomeHttpClient.RetrieveSomeData();
}

但是，在 Blazor 组件中有一个已知行为，其中该OnInitializedAsync()方法被触发了两次。在Stackoverflow 讨论中有关于如何处理它的描述。

那里的建议是检查ComponentContext.IsConnected只允许触发一次所需操作的状态。

然而，9 月 4 日的更新告诉我们应该

删除 的 任何用法IComponentContext并将预渲染期间不应运行的任何逻辑移至OnAfterRender或OnAfterRenderAsync。

使用OnAfterRenderAsync而不是在这里也不是一个选项。是的，它只被触发一次，但是当它被触发时，组件已经被渲染，并且检索任何应该用于渲染的数据已经很晚了。

所以问题是：

  1. 现在如何避免在“OnInitializedAsync()”执行期间重复加载数据？对数据服务器的两次调用并不是一个好的性能示例。
  2. 为这样的组件渲染加载数据是个好主意吗？也许有更好的方法将数据传递给组件？

标签： blazor

解决方案

如果您使用 Blazor Server 应用程序，则 OnInitialized(Async) 对将执行两次，并且启用了预渲染。要禁用预渲染，您应该将 _Host.cshtml 文件中组件元素的属性 render-mode 设置为“Server”

<app>
    <component type="typeof(App)" render-mode="Server" />
</app>

这将禁用预渲染功能。没有预渲染，没有第二次执行代码。

为这样的组件渲染加载数据是个好主意吗？也许有更好的方法将数据传递给组件？

使用数据初始化组件的方法是使用 OnInitialized(Async) 对...

OnAfterRender(Async) 对不适合该目的，尽管它在小规模数据负载上似乎渲染得很好。在渲染 Blazor 组件之后，它们最适合用于初始化 JavaScript 组件。

希望这可以帮助...

推荐阅读