ASP.NET Core Blazor components lifecycle---ASP. NET Core Blazor组件生命周期

ASP.NET Core Blazor components lifecycle allows the user to perform additional operations on components during component initialization and rendering. It's also useful to release resources when the component is removed from the page.

译：ASP. NET Core Blazor组件生命周期允许用户在组件初始化和呈现期间对组件执行额外的操作。当组件从页面中删除时，释放资源也很有用

Here's the Blazor components lifecycle:

译：以下是Blazor组件的生命周期:

 

#SetParametersAsync

This method sets the value of the properties decorated by [Parameter] or [CascadingParameter] by using the values provided by the parent component or by cascaded parameters. This is a good place to set default parameter values or read values from the query string.

译：SetParametersAsync该方法通过使用父组件或级联参数提供的值来设置由[Parameter]或[CascadingParameter]装饰的属性的值。这是设置默认参数值或从查询字符串读取值的好地方。

public override async Task SetParametersAsync(ParameterView parameters)
{
    await base.SetParametersAsync(parameters);
}

#OnInitialized / OnInitializedAsync

Allow initializing data after the parameter properties are set. This method is called once per component in Blazor WebAssembly. In Blazor Server it could be called twice when using pre-rendered mode. You can use these methods to execute code only once in your code. For instance, you can get the set up the link between 2 components as in the Grid component.

译：OnInitialized / OnInitializedAsync允许在参数属性设置后初始化数据。这个方法在Blazor WebAssembly中每个组件调用一次。在Blazor Server中，它可以在使用预渲染模式时被调用两次。您可以使用这些方法在代码中只执行一次代码。例如，您可以在Grid组件中设置两个组件之间的链接。

protected override void OnInitialized()
{
}

protected override Task OnInitializedAsync()
{
}

#OnParametersSet / OnParametersSetAsync

OnParametersSetAsync and OnParametersSet are called after OnInitialized or when the parameters are changed. You can use these methods to compute things based on the parameter. For instance, you can compute any property/field that based its value on the parameters.

译：OnParametersSetAsync和OnParametersSet在OnInitialized或参数改变后被调用。你可以用这些方法来计算基于参数的东西。例如，您可以计算基于参数值的任何属性/字段。

protected override void OnParametersSet()
{
}

protected override Task OnParametersSetAsync()
{
}

OnAfterRender / OnAfterRenderAsync

OnAfterRenderAsync and OnAfterRender are called after a component has finished rendering. Element and component references are populated at this point. You can use this step to call JavaScript code on the elements. For instance, in the Blazor Modal component, I use this method to open the modal using JavaScript.

译：OnAfterRenderAsync和OnAfterRender在组件完成渲染后被调用。此时将填充元素和组件引用。您可以使用此步骤调用元素上的JavaScript代码。例如，在Blazor Modal组件中，我使用这个方法使用JavaScript打开模态。

protected override void OnAfterRender(bool firstRender)
{
}

protected override Task OnAfterRenderAsync(bool firstRender)
{
}

#ShouldRender

You can use this method if you want to control whether a component needs to re-render after its state changed. This method is called after an explicit call to StateHasChanged or after an event is handled. You can use this method to prevent Blazor from refreshing the UI after a user has interacted with the component if you know it is not needed. As shown in the next section, StateHasChanged can be called twice per event handler. If you have a complex rendering logic, overriding ShouldRender could be a good way to optimize the component.

译：如果你想控制一个组件在状态改变后是否需要重新呈现，你可以使用这个方法。此方法在显式调用StateHasChanged之后或在处理事件之后调用。您可以使用此方法来防止Blazor在用户与组件交互后刷新UI，如果您知道它是不需要的。如下一节所示，每个事件处理程序可以调用StateHasChanged两次。如果您有一个复杂的呈现逻辑，覆盖ShouldRender可能是优化组件的好方法。

protected override bool ShouldRender()
{
    return base.ShouldRender();
}

#Event handlers

Event handlers can be synchronous or asynchronous in Blazor. In the case of a synchronous event handler StateHasChanged is called after the event handler. In the case of an asynchronous method, StateHasChanged is called twice: once when the synchronous part of the method ends, and a second time when the task is completed.

译：在Blazor中，事件处理程序可以是同步的也可以是异步的。在同步事件处理程序的情况下，在事件处理程序之后调用StateHasChanged。在异步方法的情况下，调用StateHasChanged两次:一次是在方法的同步部分结束时，第二次是在任务完成时。

Razor

<button @onclick="OnClick">Synchronous</button>
<button @onclick="OnClickAsync">Asynchronous</button>

@code{
    void OnClick()
    {
    } // StateHasChanged is called by the base class (ComponentBase) after the method is executed

    async Task OnClickAsync()
    {
        text = "click1";
        // StateHasChanged is called by the base class (ComponentBase) here as the synchronous part of the async method ends
        await Task.Delay(1000);
        await Task.Delay(2000);
        text = "click2";
    } // StateHasChanged is called by the base class (ComponentBase) after the returned task is completed
}

If you want to prevent a user from clicking twice on a button, you can check the following post: Preventing double form submission in a Blazor app

译：如果你想防止用户在一个按钮上点击两次，你可以检查以下帖子:防止在Blazor应用程序中重复提交表单

#Component disposal with IDisposable

If a component implements IDisposable, the Dispose method is called when the component is removed from the UI. You can use this method to unsubscribe from events you may have subscribed to, to stop a timer, to cancel an asynchronous operation, etc. You can use @implements IDisposable to indicate your component implement the interface:

译：如果组件实现了IDisposable，则在组件从UI中移除时调用Dispose方法。您可以使用此方法取消订阅可能已订阅的事件、停止计时器、取消异步操作等。你可以使用@implements IDisposable来指示你的组件实现这个接口:

Razor

@implements System.IDisposable

<div>A component that implements IDisposable</div>

@code {
    public void Dispose()
    {
    }
}

IAsyncDisposable is not supported for components. However, this should be supported in the next version of Blazor thanks to the following pull request.

Do you have a question or a suggestion about this post? Contact me!

译：组件不支持IAsyncDisposable。但是，由于下面的pull请求，这应该在Blazor的下一个版本中得到支持。

你对这篇文章有什么问题或建议吗?联系我!