19.CSS隔離和代碼隔離
19.1 代碼隔離
- 使用C# partial 關鍵字，創建一個與razor文件同名，擴展名加.CS的C#類文件，然後把 razor 文件中的 @code 中的代碼遷移至 cs 文件中。注意命名空間、泛形參數聲明、依賴注入的遷移
19.2 CSS隔離
- 如同前面代碼隔離文件一樣，我們創建一個組件樣式文件，並以 .CSS 爲文件名後綴。
- 組件默認的樣式文件來自wwwroot文件夾下的app.css樣式文件。
- 每個組件都可以有自己獨立的CSS樣式文件，最終所有組件的CSS樣式文件會在項目編繹時生成一個CSS合成樣式文件，生成位置在wwwroot目錄下，文件名爲"Blazor.styles.css"。
所以，在wwwroot目錄下的文件app.razor中有這樣一行代碼：
<link rel="stylesheett" href="Blazor.styles.css">
20.異常處理
20.1.系統默認的處理方式
在佈局頁面 MainLayout.razor 中，將代表子頁面佔位符的 @Body 參數，使用 <ErrorBoundary> @Body </ErrorBoundary> 包裹起來。這樣，當發生異常時，將在頁面的這個區域提示出默認錯誤信息：黃色三角中一個歎號、紅色背景白色文字:"An error has occurred."。
20.2.自定義異常處理
在 ErrorBoundary 組件中放置 ErrorContent 組件，它後面再放置被ChildContent包裹的 @Body 參數, MainLayout.razor 代碼如下：
@inherits LayoutComponentBase
<article class="content px-4">
<ErrorBoundary>
<ErrorContent>
發生異常，消息：@content.Message
</ErrorContent>
<ChildContent>
@Body
</ChildContent>
</ErrorErrorBoundary>
</article>
說明：ErrorContent 組件中有代表異常上下文的C#對象@content可以使用，它的屬性 Message,InnerException,Data,Source等。
21. NET8中的流式渲染
21.1 歷史遺留的負面包袱
以.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的計數器，但是實現頁面渲染效果卻是頁面會卡住5秒，5秒後才渲染。如果從命令行用crul https://localhost/Home來請求該頁面，則明顯觀察到，當回鍵執行命令後，命領行界面5秒內沒有結果，5秒後顯示出一屏html的請求結果。
然後，爲了解決這個問題在 .NET8之前，我們的做法是，把上面await DoCountAsync();執行代碼從生命週期方法OnInitializedAsync放入生命週期方法OnAfterRenderAsync(bool firstRender)中，代碼如下：
protected override async OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
await DoCountAsync();
}
當相於，先把頁面所有元素渲染出來（包含可能其他前前後後衆多的元素），然後才輪到響應OnAfterRenderAsyn生命週期方法，纔開始處理計數器邏輯並重新渲染計數器部分的頁面。
負面影響：當頁面元素較多，渲染任務繁重時，計數器部分的執行要等待所有頁面元素的渲染完成，會有巨大延遲。
21.2 流式渲染出場
- 設計思想：
在頁面元素從上至下的渲染過程中，遇到動態刷新的部分，則先把動態刷新的部分執行並渲染完畢，再執行該部分的後面的元素的渲染任務。達到，依然是自上而下的流式渲染過程。 - 方法：
1.在頁面增加流式渲染指令支持@attribute [StreamRedering]
2.await DoCountAsync();執行代碼依然方在生命週期方法OnInitializedAsync中
3.流式渲染模式並不要求頁面啓用交互呈現模式，即使是靜態頁面也能達成目標。
4.從命令行調用獲取頁面，返回的結果如下：
![image]()
