Blazor入手教程（六）組件的生命週期

Blazor入手教程（六）組件的生命週期

Blazor中組件的生命週期和vue十分相似：大體上說都是創建，渲染，然後監聽變量的改變重新渲染，最後銷燬，當然細節上還是各有不同的。

 

Vue組件的生命週期	Blazor組件的生命週期

 

  

Blazor組件生命週期
可覆寫方法	說明
無可重寫方法	創建組件實例
SetParametersAsync	每次參數注入時或在父級被修改時調用。即從父級傳過來的參數，或者祖先級傳過來的級聯參數，或者路由參數。在初始化之前，接受一個ParameterView類型參數，可枚舉。
OnInitialized/OnInitializedAsync	初始化，參數注入完成後
OnParametersSet/OnParametersSetAsync	每次參數設置之後調用，完成之後開始渲染組件，如果是異步則等待完成後渲染
OnAfterRender /OnAfterRenderAsync	每次渲染結束後調用，接受一個參數firstRender表示是否是首次渲染，只有在首次渲染是是true，其餘均是false。
ShouldRender	除了首次每次渲染完成後調用，返回一個bool值，表示是否進行渲染
	每次渲染完成後調用，接

 

 

只有OnInitialized/OnInitializedAsync是隻調用一次的，其他的都有可能調用多次。

框架裏面的生命週期本來是沒有銷燬的。但是你可以通過組件繼承IDispose接口來自定義組件的釋放。

  

單個頁面的生命週期

 

 

 

嵌入子組件時父組件和子組件Modal的各自的生命週期

 

 

 

在Blazor頁面可以覆寫這些方法。

 

@page "/lifecycle" 

<h3>生命週期</h3>

@code {


    public override Task SetParametersAsync(ParameterView parameters)
    {

        Console.WriteLine("SetParametersAsync ParameterView=" + parameters);
        foreach (var item in parameters)
        {
            Console.WriteLine("parameters item.Name=" + item.Name + ",item.Value=" + item.Value);

        }


        return base.SetParametersAsync(parameters);


    }

    protected override void OnInitialized()
    {

        Console.WriteLine("OnInitialized");
        base.OnInitialized();
    }

    protected override Task OnInitializedAsync()
    {
        Console.WriteLine("OnInitializedAsync");
        return base.OnInitializedAsync();

    }

    protected override void OnAfterRender(bool firstRender)
    {

        Console.WriteLine("OnAfterRender firstRender=" + firstRender);
        base.OnAfterRender(firstRender);
    }


    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        Console.WriteLine("OnAfterRenderAsync firstRender=" + firstRender);
        return base.OnAfterRenderAsync(firstRender);
    }


    protected override void OnParametersSet()
    {
        Console.WriteLine("OnParametersSet");
        base.OnParametersSet();
    }

    protected override Task OnParametersSetAsync()
    {
        Console.WriteLine("OnParametersSetAsync");
        return base.OnParametersSetAsync();
    }
    //
    // 摘要:
    //     Returns a flag to indicate whether the component should render.
    protected override bool ShouldRender()
    {
        Console.WriteLine("ShouldRender");
        return base.ShouldRender();
    }
}

 

目錄

Blazor入手教程（一）前言

Blazor入手教程（二）css和class綁定

Blazor入手教程（三）列表和條件渲染

Blazor入手教程（四）路由

Blazor入手教程（五）組件

Blazor入手教程（六）組件的生命週期

Blazor入手教程（七）表單

Blazor入手教程（八）佈局Layout

Blazor入手教程（九）c#和js互相調用

Blazor入手教程（十）部署安裝

Blazor入手教程（十一）使用組件庫AntDesign Blazor