Blazor學(xué)習(xí)記錄_8.CSS隔離和代碼隔離_異常處理_流式渲染

19.CSS隔離和代碼隔離

19.1 代碼隔離

• 使用C# partial 關(guān)鍵字，創(chuàng)建一個與razor文件同名，擴(kuò)展名加.CS的C#類文件，然后把 razor 文件中的 @code 中的代碼遷移至 cs 文件中。注意命名空間、泛形參數(shù)聲明、依賴注入的遷移

19.2 CSS隔離

• 如同前面代碼隔離文件一樣，我們創(chuàng)建一個組件樣式文件，并以 .CSS 為文件名后綴。
• 組件默認(rèn)的樣式文件來自wwwroot文件夾下的app.css樣式文件。
• 每個組件都可以有自己獨立的CSS樣式文件，最終所有組件的CSS樣式文件會在項目編繹時生成一個CSS合成樣式文件，生成位置在wwwroot目錄下，文件名為"Blazor.styles.css"。
  所以，在wwwroot目錄下的文件app.razor中有這樣一行代碼：
  <link rel="stylesheett" href="Blazor.styles.css">

20.異常處理

20.1.系統(tǒng)默認(rèn)的處理方式

在布局頁面 MainLayout.razor 中，將代表子頁面占位符的 @Body 參數(shù)，使用 <ErrorBoundary> @Body </ErrorBoundary> 包裹起來。這樣，當(dāng)發(fā)生異常時，將在頁面的這個區(qū)域提示出默認(rèn)錯誤信息：黃色三角中一個嘆號、紅色背景白色文字:"An error has occurred."。

20.2.自定義異常處理

在 ErrorBoundary 組件中放置 ErrorContent 組件，它后面再放置被ChildContent包裹的 @Body 參數(shù), MainLayout.razor 代碼如下：

@inherits LayoutComponentBase
<article class="content px-4">
    <ErrorBoundary>
        <ErrorContent>
            發(fā)生異常，消息：@content.Message
        </ErrorContent>
        <ChildContent>
            @Body
        </ChildContent>
    </ErrorErrorBoundary>
</article>

說明：ErrorContent 組件中有代表異常上下文的C#對象@content可以使用，它的屬性 Message,InnerException,Data,Source等。

21. NET8中的流式渲染

21.1 歷史遺留的負(fù)面包袱

以.NET8之前，如果我們有這樣一段代碼：
Home.razor

@page "Home"
<p> Count：@count </p>
@code
{
    int count = 0;
    async Task DoCountAsync()
    {
        for(int i=0;i<5;i++)
        {
            await Task.Delay(1000);
            count++;
            StateHasChanged();
        }
    }
    protected override async OnInitializedAsync()
    {
        await DoCountAsync();
    }
}

該代碼表示一個共5秒每秒自增1的計數(shù)器，但是實現(xiàn)頁面渲染效果卻是頁面會卡住5秒，5秒后才渲染。如果從命令行用crul https://localhost/Home來請求該頁面，則明顯觀察到，當(dāng)回鍵執(zhí)行命令后，命領(lǐng)行界面5秒內(nèi)沒有結(jié)果，5秒后顯示出一屏html的請求結(jié)果。
然后，為了解決這個問題在 .NET8之前，我們的做法是，把上面await DoCountAsync();執(zhí)行代碼從生命周期方法OnInitializedAsync放入生命周期方法OnAfterRenderAsync(bool firstRender)中，代碼如下：

protected override async OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
        await DoCountAsync();
}

當(dāng)相于，先把頁面所有元素渲染出來（包含可能其他前前后后眾多的元素），然后才輪到響應(yīng)OnAfterRenderAsyn生命周期方法，才開始處理計數(shù)器邏輯并重新渲染計數(shù)器部分的頁面。
負(fù)面影響：當(dāng)頁面元素較多，渲染任務(wù)繁重時，計數(shù)器部分的執(zhí)行要等待所有頁面元素的渲染完成，會有巨大延遲。

21.2 流式渲染出場

• 設(shè)計思想：
  在頁面元素從上至下的渲染過程中，遇到動態(tài)刷新的部分，則先把動態(tài)刷新的部分執(zhí)行并渲染完畢，再執(zhí)行該部分的后面的元素的渲染任務(wù)。達(dá)到，依然是自上而下的流式渲染過程。
• 方法：
  1.在頁面增加流式渲染指令支持 @attribute [StreamRedering]
  2.await DoCountAsync();執(zhí)行代碼依然方在生命周期方法OnInitializedAsync中
  3.流式渲染模式并不要求頁面啟用交互呈現(xiàn)模式，即使是靜態(tài)頁面也能達(dá)成目標(biāo)。
  4.從命令行調(diào)用獲取頁面，返回的結(jié)果如下：