這篇我們來了解元件的一生。

一個元件從出生到死亡，有幾個階段是我們可以一同參與的，按照順序有下列幾個：

1. OnInitialized & OnInitializedAsync
2. OnParametersSet & OnParametersSetAsync
3. OnAfterRender & OnAfterRenderAsync

OnInitialized & OnInitialized Async

當元件完全載入並要初始化時，就會執行OnInitialized方法，有些元件，需要頁面載入後顯示資料，就可以OnInitialized方法中進行http request取得資料。

OnParametersSet & OnParametersSetAsync

這個method與OnInitialized 不大相同，OnInitialized是只有在剛初始化時會執行，OnParametersSet 則是在OnInitialized後執行一次，再來是每次只要Parameter有異動，就會執行一次，來看看下面這個新增待辦事項的例子：

index.razor。

@page "/"

<h1>OnParametersSet Demo</h1>

<table class="table table-hover">
    <tr>
        <th>代辦事項</th>
    </tr>
    @foreach (var item in Todos)
    {
        <TodoItem item="@item" />
    }
</table>

<button class="btn btn-primary" @onclick="addTodo">新增待辦事項</button>

@code{

    public List<string> Todos { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Todos = new List<string>();
    }

    void addTodo()
    {
        Todos.Add("Buy Banana");
    }
}

TodoItem.razor

<tr>
    <td>@item</td>
</tr>

@code {

    [Parameter]
    public string item { get; set; }

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

在Index.razor中，我們透過OnInitialized初始化Todo這個List物件，並在table中透過foreach，將每個item傳給TodoItem這個元件，來顯示每一筆tr資料。

TodoItem的職責單純：接收父元件index.razor傳來的Todo Item，並bind到td中的@item，這邊我們override OnParametersSet，只要item有設定或異動，就會在瀏覽器console顯示OnParametersSet called。

在index.razor中只要新增待辦事項按鈕點擊後，將會加入一筆資料到Todos中，這時就會觸發TodoItem中的OnParametersSet ，來看看效果吧。

OnAfterRender & OnAfterRenderAsync

OnAfterRender是在Html都載入完畢後觸發，所以如果需要使用Javascript來控制Html的話，可以在這個時間點進行。另外OnAfterRender還可以透過firstRender參數來看是否初次render。

現在幫index.razor頁面加上OnAfterRender

@page "/"

<h1>OnParametersSet Demo</h1>

<table class="table table-hover">
    <tr>
        <th>代辦事項</th>
    </tr>
    @foreach (var item in Todos)
    {
        <TodoItem item="@item" />
    }
</table>

<button class="btn btn-primary" @onclick="addTodo">新增待辦事項</button>

@code{

    public List<string> Todos { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Todos = new List<string>();
    }

    void addTodo()
    {
        Todos.Add("Buy Banana");
    }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        Console.WriteLine($"OnAfterRender called。Is First Render : {firstRender}");
    }
}

來看看console怎麼顯示

可以看到每次點擊新增按鈕都會執行OnAfterRender，但只有第一次載入時，IsFirstRender是True，再次點擊按鈕後一樣執行OnAfterRender ，但IsfFirstRender變false了。

ShouldRender

另外如果因為一些因素不想要rerender的話，可以override ShouldRender。
只要return false，整個畫面都不會重新渲染。

protected override bool ShouldRender()
    {
        return false;
    }

看看設定後的樣子：

以上就是今天元件生命週期的介紹。