Component Lifecycle (구성 요소 수명 주기 )

구성 요소의 수명 주기는 구성 요소가 렌더링될 때 시작되고 구성 요소가 UI에서 제거될 때 끝난다.

initialize , ParametersSet , AfterRender 및 Dispose 의 4가지 주요 단계가 있습니다

 

 

https://blazorschool.com/tutorial/blazor-server/dotnet6/component-lifecycle-431616

 

Initialize And Dispose

@page "/components/lifecycle/initialize-dispose"
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager
@implements IDisposable

<h3>Initialize And Dispose</h3>
<div>Initialize Value: @Text</div>

@code {
    public string Text { get; set; } = "";

    protected override void OnInitialized()
    {
        Text = "OnInitialized";
        NavigationManager.LocationChanged += OnLocationChanged;
    }
    public void OnLocationChanged(object? sender, LocationChangedEventArgs eventArgs) => JSRuntime.InvokeVoidAsync("alert", "page moving");
    public void Dispose()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
        JSRuntime.InvokeVoidAsync("console.log", "Dispose page and unsubscribe handler");
    }
}

 

 

ParameterSet

 

ComponentParameter

[Parameter]
public string? ParamText { get; set; } = "";

 

QueryParameter

[Parameter]
[SupplyParameterFromQuery]
public string? QueryText { get; set; } = "";

 

fullcode

@page "/components/lifecycle/parameter-set/{ParamText?}"
@inject IJSRuntime JSRuntime
@inject NavigationManager NavigationManager

<h3>ParametersSet</h3>
<div>Parameter Value: @ParamText</div>

@code {
    [Parameter]
    public string? ParamText { get; set; } = "";

    [Parameter]
    [SupplyParameterFromQuery]
    public string? QueryText { get; set; } = "";

    protected override void OnParametersSet()
    {
        JSRuntime.InvokeVoidAsync("alert", $"parameter set : ParamText = {ParamText} , QueryText={QueryText}");
        base.OnParametersSet();
    }
}

 

components/lifecycle/parameter-set/KFC?QueryText=내가짱이다.

 

 

 

AfterRender

ServerPrender mode 로 실행시 Initialize 와 달리 한번만 실행된다. 

(Initialize 는 두번 실행된다. )

statechanges 를 이용하여 component 의 렌더링을 강제로 trigger 할 경우에

firstRender flg 가 false 로 set 된다. 

 

@page "/components/lifecycle/after-render"
@inject IJSRuntime JSRuntime

<h3>AfterRender</h3>
<button class="btn btn-primary" @onclick="StateHasChanged">Trigger AfterRender</button>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("alert", $"it is firstRender = {firstRender}");
    }
}

Trigger AfterRender 버튼 click 후

 

 

 

 

 

관련영상

https://youtu.be/4MBkvadOqBM