公司网站如何备案,网站网络推广公司,长沙点梦网站建设,上海市虹口市容建设公司网站原文链接#xff1a;https://blazor-university.com/components/component-lifecycles/组件生命周期源代码[1]Blazor 组件具有许多我们可以重写以影响应用程序行为的虚拟方法。这些方法在组件生命周期的不同时间执行。下图概述了这些生命周期方法的流程。组件生命周期图SetPar… 原文链接https://blazor-university.com/components/component-lifecycles/组件生命周期源代码[1]Blazor 组件具有许多我们可以重写以影响应用程序行为的虚拟方法。这些方法在组件生命周期的不同时间执行。下图概述了这些生命周期方法的流程。组件生命周期图SetParametersAsync每当父级渲染时执行此方法。传递给组件的参数包含在 ParameterView 中。这是基于传递给组件的状态对服务器举例进行异步调用的好时机。当您在重写中调用 base.SetParametersAsync(parameters) 时将为组件的 [Parameter] 属性分配它们的值。这也是分配默认参数值的正确位置。有关完整说明请参阅可选路由参数[2]。OnInitialized / OnInitializedAsync一旦 ParameterCollection 的状态被分配给组件的 [Parameter] 属性这些方法就会被执行。这与 SetParametersAsync 一样有用但可以使用组件的状态。该方法仅在组件首次创建时执行一次。如果父级稍后更改组件的参数则跳过此方法。注意 当组件是 一个 page并且我们的 Blazor 应用导航到渲染同一页面的新 URL 时Blazor 将重用该页面的当前对象实例。因为对象是同一个实例所以 Blazor 不会在对象上调用 IDisposable.Dispose也不会再次执行其 OnInitialized 方法。OnParametersSet / OnParametersSetAsync如果这是组件的新实例则此方法将在 OnInitializedAsync 之后立即执行。如果它是由于其父组件正在重新渲染而正在重新渲染的现有组件则不会执行 OnInitialized 方法而是在 SetParametersAsync 之后立即执行此方法。StateHasChanged此方法标记要渲染的组件。每当组件想通知 Blazor 发生了会导致渲染输出不同的更改时它都会调用此方法。例如在 Clock 组件中我们可能会设置一个循环 1 秒的计时器然后执行 StateHasChanged 以便以正确的时间重新渲染。另一个用途是指示 Blazor 通过异步方法部分执行重新渲染。private async Task GetDataFromMultipleSourcesAsync()
{var remainingTasks new HashSetTask(CreateTheTasks());while (remainingTasks.Any()){Task completedTask await Task.WhenAny(remainingTasks);remainingTasks.Remove(completedTask);StateHasChanged();}
}当等待发生时第 6 行或方法完成时第 10 行将处理对 StateHasChanged 的调用。ShouldRender该方法可以通过返回 false 来防止组件的渲染树被重新计算。请注意第一次创建和渲染组件时不会执行此方法。当我们知道我们的状态自上次渲染后未更改或仅以会导致渲染相同输出的方式更改时指示 Blazor 不执行 BuildRenderTree 操作可以节省处理时间并改善用户体验。第一次渲染组件时不执行此方法。BuildRenderTree此方法将组件的内容渲染为应渲染给用户的内存表示RenderTree[3]。h1People/h1
foreach(Person currentPerson in people)
{ShowPersonDetails PersoncurrentPerson/
}前面的标记将在渲染树中添加一个 h1其中“People”作为其内容。然后它将为 people 中的每个 Person 创建一个 ShowPersonDetails 的新实例。如果我们的组件稍后在 people 中使用附加项重新渲染则将创建 ShowPersonDetails 组件的新实例并将其添加到我们组件的渲染树中。如果 people 中的项目较少那么之前创建的一些 ShowPersonDetails 组件实例将从我们组件的渲染树中丢弃如果它们实现 IDiposable则会对它们执行 Dispose()。注意 为了提高渲染效率在任何类型的循环中渲染标记时请尽可能始终使用 key 指令[4]。OnAfterRender / OnAfterRenderAsync每次 Blazor 重新生成组件的渲染树[5]时都会执行最后两个方法。这可能是由于组件的父级重新渲染、用户与组件交互例如鼠标单击或组件执行其 StateHasChanged 方法来调用重新渲染的结果。这些方法有一个名为 firstRender 的参数。此参数仅在当前组件上第一次调用该方法时为 true从那里开始它将始终为 false。在需要附加组件连接的情况下例如通过 JavaScript知道这是第一次渲染很有用。直到 OnAfterRender 方法执行之后才能安全地使用通过 ref 指令设置的组件的任何引用。ChildComponent refMyReferenceToChildComponent/code
{// This will be null until the OnAfterRender* methods executeChildComponent MyReferenceToChildComponent;
}直到 OnAfterRender 方法被执行并且 firstRender 设置为 true 之后使用通过 ref 指令设置的 HTML 元素的任何引用是安全的。h1 refMyReferenceToAnHtmlElementHello/h1code
{// This will be null until the OnAfterRender* methods execute// with firstRender set to trueElementReference MyReferenceToAnHtmlElement;
}Dispose尽管这并不是 ComponentBase 的生命周期方法之一但如果组件实现了 IDisposable那么一旦从其父级的渲染树中删除该组件Blazor 就会执行 Dispose。要实现 IDisposable我们需要将 implements IDisposable 添加到我们的 razor 文件中。implements IDisposable
h1This is MyComponent/h1code {void IDisposable.Dispose(){// Code here}
}在异步生命周期方法中等待请务必注意Blazor 不会在能够渲染组件之前等待长时间运行的异步方法完成而是会尽快触发渲染。这使组件能够在执行后台任务例如从服务器检索数据时渲染标记供用户查看。SetParametersAsync第一次 await 的动作继续生命周期过程 如果是新实例则为 OnInitialized否则为 OnParametersSet退出方法的动作没有进一步的动作注意 base.SetParametersAsync 方法必须在方法中的任何 await 指令之前执行否则会抛出 InvalidOperationException。OnInitializedAsync第一次 await 的动作渲染组件退出方法的动作继续生命周期过程OnParametersSetAsync第一次 await 的动作渲染组件退出方法的动作继续生命周期过程OnAfterRenderAsync第一次 await 的动作没有进一步的动作退出方法的动作没有进一步的动作简单的规则是 SetParametersAsync 是唯一不能通过等待任务来暂停生命周期过程的方法。所有其他异步方法都可以暂停生命周期过程直到执行退出该方法并且第一个 await 将通过 BuildRenderTree 进行渲染以防止用户不得不等待查看更新。OnAfterRenderAsync 可能看起来像一个异常因为它在任何一种情况下都不会执行进一步的操作。如果我们考虑渲染是执行链的末端这一事实那么我们可以将其视为完成链而不是什么都不做。至于等待渲染如果需要程序员必须通过调用 StateHasChanged 显式完成否则 OnAfterRenderAsync 中的等待将导致无限循环。具有异步等待的组件生命周期异步方法和多个等待Blazor 在异步方法中的 await 上执行的代码只会在第一次 await 时执行。后续等待不会导致多次渲染。例如protected override async Task OnParametersSetAsync()
{// Automatically renders when next line starts to awaitawait Task.Delay(1000); // No automatic render when next line starts to awaitawait Task.Delay(1000); // No automatic render when next line starts to awaitawait Task.Delay(1000);
}如果我们想在其他点进行渲染那么我们必须在所有其他 await 语句之前调用 StateHasChanged。protected override async Task OnParametersSetAsync()
{// Automatically renders when next line starts to awaitawait Task.Delay(1000); // Explicitly render when next line starts to awaitStateHasChanged();await Task.Delay(1000); // Explicitly render when next line starts to awaitStateHasChanged();await Task.Delay(1000);
}有关如何安全地使用在同一组件上运行的不同线程的更多信息请参阅多线程渲染[6]部分。参考资料[1]源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/ComponentLifecycles
