[AspNetCore 3.0 ] Blazor 服務端組件 Render, RenderFragment ，RenderTreeBuilder, CascadingValue/CascadingPa

1、組件

支撐Blazor的是微軟的兩大成熟技術，Razor模板和SignalR，二者的交匯點就是組件。一般，咱們從ComponentBase派生的類型，或者建立的.razor 文件，就能夠稱做組件。基於這兩大技術，組件也就具有了兩大功能，一、生成html片斷；二、維護組件狀態。這裏咱們來講一下組件最基本的功能，生成html片斷。

2、RenderTreeBuilder，RenderFragment

咱們知道，瀏覽器處理HTML 文檔時會將全部的標籤都掛到一顆文檔樹中，不管一段HTML來自哪裏，總會被這棵樹安排的明明白白。換句話說，若是有根線的話，咱們能夠依靠這棵樹把全部的標籤都串起來，而在Blazor組件中也有這麼一根線，這根線就是RenderTreeBuilder，拿這根線的人就是Blazor框架。

備註一下：如下涉及的代碼若是沒有特別說明，都是指寫在.cs文件中，繼承 Microsoft.AspNetCore.Components.ComponentBase 的組件類。

下面用代碼看看這根線。 新建一個Blazor 應用 項目，新增 一個c#類，MyComp 繼承 Microsoft.AspNetCore.Components.ComponentBase，而後override 一下，找到以下方法：

protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);//加斷點
        }

加個斷點，在項目的 Pages\Index.razor 里加上一行。<MyComp />
若是不想代碼執行兩次，就在Pages_Host.cshtml 裏修改一下rendermode

@(await Html.RenderComponentAsync<App>(RenderMode.Server))

F5跑起來，雖然沒有任何輸出，可是斷點命中了，RenderTreeBuilder這根線確實串起了咱們的組件。
如今讓咱們看看，RenderTreeBuilder 能夠作什麼。

protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.AddMarkupContent(0, "<span> BuildRenderTree  使用 AddMarkupContent 輸出 Html 。</span>");
           // base.BuildRenderTree(builder);
        }

再次跑起來，咱們發現頁面上多了咱們加的span.也就是說HTML的輸出，靠的是調用RenderTreeBuilder上的各類方法加上的。組件的基本原理也就是這樣，一個RenderTreeBuilder 進入不一樣組件的 BuildRenderTree 方法，方法內 經過RenderTreeBuilder上的add.. open.. 方法把咱們想要輸出的部分，掛載到builder上，最終輸出到瀏覽器。

接下來，咱們考察一下BuildRenderTree方法， 用委託描述一下，咱們發現這就是一個Action<RenderTreeBuilder>.

在標題裏咱們提到了RenderFragment， 查看一下它的定義。

public delegate void RenderFragment(RenderTreeBuilder builder);//仍是一個 Action<RenderTreeBuilder>，或者說，BuildRenderTree 就是一個RenderFragment

咱們發現和前面的BuildRenderTree 在簽名上如出一轍，既然blazor會使用RenderTreeBuilder 去調用BuildRenderTree 方法，那麼RenderFragment會不會也被調用？

讓咱們暫時離開組件MyComp,轉到Index.razor 內加一段code

@code{
     RenderFragment MyRender=(builder) => builder.AddMarkupContent(0, "<span>當前輸出來自：Index.razor 組件， MyRender 字段。 </span>");
        
}

在以前咱們聲明 MyComp組件以後，再加一行調用 @MyRender.
完整的Index.razor

@page "/"

<MyComp />

 @MyRender

@code{
     
    RenderFragment MyRender = (builder) => builder.AddMarkupContent(0, "<div>當前輸出來自：Index.razor 組件， MyRender 字段。 </div>");

}

兩段信息，如願輸出，證實blazor可以識別出模板中的 RenderFragment ，並自動調用。
既然咱們在組件模板中(Index.razor)書寫RenderFragment ，固然有其餘方式能夠不用拼湊字符串。

RenderFragment AnotherRender =@<div>模板寫法的RenderFragment</div>;

加上調用 @AnotherRender，跑起來，三段信息。

至此，咱們對RenderFragment 有了一個大概的瞭解，它是一個函數，內部打包了咱們的輸出內容。在模板中咱們可使用，@xxxrender將其就地展開輸出，在c#環境下咱們能夠經過 xxxrender(builder)的形式進行調用（好比在BuildRenderTree方法內調用）。又由於其自己就是一個委託函數，所以咱們便可以在組件內使用，也能夠自由的在組件之間傳遞， 完成對輸出內容及邏輯的複用。
同時，爲了更好的配合RenderFragment 使用，Blazor中還提供了一個工廠委託，RenderFragment , 即 Func<TValue,RenderFragment> 用法通常以下

//模板中(Index.razor)
RenderFragment<object> RenderValue =value=> @<div> render value :@value</div>;

調用 @RenderValue (123) 若是在c#代碼中,好比在BuildRenderTree 方法內， RenderValue (123)(builder)。

vs中*.razor在編譯時會生成對應的.g.cs代碼，位置在obj/debug/netcoreapp3.0/ razor 下，能夠多打開看看。

3、RenderFragment 的一些用法

一、html中，咱們能夠在一對標籤內添加 內容，好比 <div>123</div>,組件默認是不支持此類操做的，這時咱們就須要RenderFragment來包裝標籤內的內容。

讓咱們回到MyComp組件類中，增長一個屬性

[Parameter] public RenderFragment ChildContent{ get; set; }

Index.razor

<MyComp><div> 組件標記內部</div></MyComp>

此時直接運行的話，組件不會輸出內部信息，須要在BuildRenderTree 中執行一下

protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
          ChildContent?.Invoke(builder);
          
            base.BuildRenderTree(builder);
        }

組件標記內的片斷被打包進了 ChildContent，已經變成了獨立的一個片斷，所以須要咱們顯式的調用一下。
ChildContent 是特殊名稱

二、組件上有多個RenderFragment

[Parameter] public RenderFragment Fragment1 { get; set; }
        [Parameter] public RenderFragment Fragment2 { get; set; }

此時調用須要調整一下,否則框架不知道把內容片斷打包進哪一個屬性裏

<MyComp>
        <Fragment1>

            <div> Fragment1 </div>
        </Fragment1>
        <Fragment1>
            <div> Fragment1.1  </div>

        </Fragment1>
        <Fragment2>
            <div> Fragment2  </div>

        </Fragment2>
  
    </MyComp>

這裏故意重複處理了Fragment1，能夠看看結果。

三、帶參數的RenderFragment
code:

[Parameter] public RenderFragment<MyComp> ChildContent { get; set; }

調用及傳參

<MyComp Context="self" > //<ChildContent>
       @self.GetType()
      
    </MyComp>  //</ChildContent>

四、打開的組件聲明標記內部，除了可使用RenderFragment 參數屬性外，其餘的razor 語法基本都支持，也包括另一個組件。
好比

<MyComp>
         <CompA />
          <CompB> ...... </CompB>
</MyComp>

或者

<MyComp>
       <Fragment1>
         <CompA />
      </Fragment1>

          <Fragment2>
          <CompB> ...... </CompB>
          </Fragment2>
</MyComp>

雖然看上去，聲明標記的代碼很類似，但卻有着實質上的不一樣。
當咱們使用 標記聲明一個參數屬性時，咱們是在生成RenderFragment，隨後將其賦值給對應的屬性。
當咱們使用標記聲明一個組件時，咱們是在構造一個組件實例，而後調用它，將組件輸出插入到組件所在位置。
參數屬性（RenderFragment ）屬於組件，是組件的一個屬性，互相關係是明確的類型《=》成員關係。
組件內部的其餘組件標記不少時候只是爲了複用一些輸出片斷，若是不經過代碼進行一些處理的話，是沒法明確知道組件之間關係的。

4、CascadingValue/CascadingParameter

組件多起來以後，組件之間的數據共享和傳遞以及組件間的關係就會變的很麻煩，數量少的時候，還可使用@ref 手工指定，多起來以後@ref明顯不是一個好方法。 組件CascadingValue和對應的特性[CascadingParameter]就是爲了解決這一問題而出現。

一個CascadingValue 內的全部組件 包括子級，只要組件屬性上附加了[CascadingParameter]特性，而且值內容能夠兼容，此屬性就會被賦值。

好比給組件定義 屬性接收CascadingValue

[CascadingParameter] public  int Value { get; set; }
        [CascadingParameter] public string SValue { get; set; }

//修改下輸出
    protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.AddMarkupContent(0, $"<div>CascadingValue: {Value},{SValue} </div>");// 一個int，一個string
            ChildContent?.Invoke(this)(builder);//加載下級組件
            base.BuildRenderTree(builder);
        }

在razor頁中

<CascadingValue Value="123"> //int
      <MyComp>
                         <MyComp></MyComp>
                     </MyComp>
</CascadingValue >

執行後咱們就會發現，兩個組件都捕獲到了int 值 123.
如今再加一個CascadingValue

<CascadingValue Value="123"> //int
<CascadingValue Value="@("aaaa")"> //string
      <MyComp>
                         <MyComp></MyComp>
                     </MyComp>
</CascadingValue >
</CascadingValue >

分屬兩個CascadingValue 的兩個不一樣類型值，就被每一個組件的兩個屬性捕獲到，方便、強大並且自身不產生任何HTML輸出，所以使用場景很是普遍。好比官方Forms組件中就是藉助CascadingValue/Parameter 完成model的設置，再好比，組件默認沒有處理父子、包含關係的接口，這時就能夠簡單的定義一個[CascadingParameter] public ComponentBase Parent{get;set;}專門接收父級組件，處理相似Table/Columns之類的組件關係。

5、總結

組件是爲其自身的 BuildRenderTree方法 （ RenderFragment ）服務的，組件上的各類屬性方法，都是爲了給RenderFragment 作環境準備，所以組件實質上是個RenderFragment的包裝類。組件系統則經過一個RenderTreeBuilder依次調用各組件，收集輸出內容，最終交給系統內部完成輸出。 一、.Razor文件會被編譯爲一個組件類（obj/debug/netcore3.0/razor/...) 二、組件系統建立RenderTreeBuilder，將其交給組件實例 三、組件實例使用 RenderTreeBuilder，調用自身 BuildRenderTree。 四、等待組件狀態變化，再次輸出。