Blazor 机制初探以及什么是前后端分离，还不赶紧上车？
标签： Blazor .Net
上一篇文章我发了一个 BlazAdmin 的尝鲜版，这一次主要聊聊 Blazor 是如何做到用 C# 来写前端的
飚车前
需要说明的一点是，因为我深入接触 Blazor 的时间也不是多长，顶多也就半年，所以这篇文章的内容我不能保证 100% 正确，但可以保证大致原理正确
另外，具有以下条件的园友食用这篇文章会更舒服：
建议结合 AspNetCore 源码看这篇文章,我不能贴出所有源码，源码需要编译过才能看，不然会很麻烦，但编译这事比较难，编译源码比看源码难多了，这儿是一位园友的源码编译教程：https://www.cnblogs.com/ZaraNet/p/12001261.html
天底下没有新鲜事儿，Blazor 看着神奇，其实也没啥黑科技，它跑不掉 Http 协议，也跑不掉 Html
开始发车
Blazor 服务端渲染过程
当您打开一个服务端渲染的 Blazor 应用时：
浏览器 -->> 服务器: 建立 WebSocket 连接
服务器 -->> 浏览器: 发送首页 HTML 代码
loop 连接未断开
Note left of 浏览器: 浏览器JS捕获用户输入事件
浏览器 -->> 服务器: 通知服务器发生了该事件
Note right of 服务器: 服务器 .Net 处理事件
服务器-->>浏览器: 发送有变动的 HTML 代码
Note left of 浏览器: 浏览器JS渲染变动的 HTML 代码
end有以下几点需要注意：
服务端渲染的基本原理就是这样，下面我们详细讨论
Blazor 路由渲染过程
当我们通过 NavigationManager 去改变路由地址时，大概流程如下
st=>start: 服务器启动
rt=>operation: 初始化 Router 组件，Router 内部注册 LocationChanged 事件
op1=>operation: LocationChanged 事件中根据路由查找对应的组件，默认触发首页组件
queue=>operation: 加入渲染队列
render=>operation: 一直进行渲染及比对，直到队列中所有的组件全部渲染完
diff=>operation: 将比对的差异结果更新至浏览器
e=>end: 等待下一次路由改变，继续触发 LocationChanged 事件
st->rt->op1->queue->render->diff->e这里的 Router 组件，就是我们经常用到的，看看下面的代码，是不是很熟悉？
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Router 组件部分代码
public class Router : IComponent, IHandleAfterRender, IDisposable
{
public void Attach(RenderHandle renderHandle)
{
_logger = LoggerFactory.CreateLogger<Router>();
_renderHandle = renderHandle;
_baseUri = NavigationManager.BaseUri;
_locationAbsolute = NavigationManager.Uri;
//注册 LocationChanged 事件
NavigationManager.LocationChanged += OnLocationChanged;
}
private void OnLocationChanged(object sender, LocationChangedEventArgs args)
{
_locationAbsolute = args.Location;
if (_renderHandle.IsInitialized && Routes != null)
{
Refresh(args.IsNavigationIntercepted);
}
}
private void Refresh(bool isNavigationIntercepted)
{
var locationPath = NavigationManager.ToBaseRelativePath(_locationAbsolute);
locationPath = StringUntilAny(locationPath, _queryOrHashStartChar);
var context = new RouteContext(locationPath);
Routes.Route(context);
..........
var routeData = new RouteData(
context.Handler,
context.Parameters ?? _emptyParametersDictionary);
//此处开始渲染，Found 是一个 RenderFragment<RouteData> 委托，是我们在调用的时候指定的那个
_renderHandle.Render(Found(routeData));
..........
}
}Blazor 组件渲染过程
要开始飚车了，握紧方向盘，不要翻车。
这部分可能会比较难，如果你发现你看不懂的话就先尝试自己写个组件玩玩。
在 Blazor 中，几乎一切皆组件。首先我们得提到一个 Blazor 组件的几个关键方法，部分方法也是它的生命周期
另有一个关键的结构体 EventCallBack，还有一个关键的委托RenderFragment,它俩非常重要，前者可能见得比较少，后者基本上玩过 Blazor 的园友都知道。
上面提到的关键点，有个印象即可，下面将开始飚车，我们将重点讨论那个流程图中渲染对比的那部分，但将忽略浏览器捕获事件这一步，我不能贴太多的源码，尽可能用流程图表示
主要生命周期过程
st=>start: 开始渲染
isfirst=>condition: 是否首次渲染
init=>operation: 调用 OnInitialized 方法
initAsync=>operation: 调用 OnInitializedAsync 方法
onSetParameter=>operation: 调用 OnParametersSet 方法
setParameter=>operation: 调用 SetParametersAsync 方法
stateHasChanged=>operation: 调用 StateHasChanged 方法
st->setParameter->isfirst->init->initAsync->onSetParameter
onSetParameter->stateHasChanged
isfirst(yes)->init
isfirst(no)->onSetParameter需要注意的是这个流程中没有 OnAfterRender 方法的调用，这个将在下面讨论
StateHasChanged 方法
这个方法至关重要，就比如上图中最终只到了 StateHasChanged 方法，就没了下文，我们来看看这个方法里面有什么
st=>start: 开始
isfirst=>condition: 是否首次渲染
should=>condition: ShouldRender 为True？
queue=>operation: 进入渲染队列
render=>operation: 开始循环渲染队列的数据
after=>operation: 触发 OnAfterRender 方法
e=>end: 结束
st->isfirst
queue->render->after->e
isfirst(yes)->queue
isfirst(no)->should
should(yes)->queue
should(no)->e至此，我们基本把一个组件的生命周期的那几个方法讨论完了，除了一些异步版本的，逻辑都差不多，没有写进来
渲染队列时都干了啥？
嗯对，这是重点
st=>start: 开始渲染队列
queue=>condition: 队列还有组件？
read=>operation: 从队列获取组件
swap=>operation: 备份当前 DOM 树及清空
render=>operation: 调用组件的 RenderFragment 委托获取新的 DOM 树
diff=>operation: 与备份的树对比
append=>operation: 将对比结果存入列表
display=>operation: 将列表中的所有对比结果发送至浏览器
e=>end: 结束
st->queue
read->swap->render->diff->append->queue
queue(yes)->read
queue(no)->display->e为了图好看点（好吧现在其实也不好看），我把流程缩短了一点，有以下几点需要注意：
下面是 ComponentBase 的部分代码，上文提到的私有属性就是 _renderFragment,这个私有属性仅在此处被赋值，可以看到这个属性内部调用了 BuildRenderTree 方法
public abstract class ComponentBase : IComponent, IHandleEvent, IHandleAfterRender
{
private readonly RenderFragment _renderFragment;
/// <summary>
/// Constructs an instance of <see cref="ComponentBase"/>.
/// </summary>
public ComponentBase()
{
_renderFragment = builder =>
{
_hasPendingQueuedRender = false;
_hasNeverRendered = false;
BuildRenderTree(builder);
};
}
}针对最后一点，举个例子
下面是 NavMenu.razor 组件的 Razor 代码
<BMenu>
<BMenuItem Route="button">Button 按钮</BMenuItem>
</BMenu>下面是 VS 生成的代码
public partial class NavMenu : Microsoft.AspNetCore.Components.ComponentBase
{
protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
{
__builder.OpenComponent<BMenu>(1);
__builder.AddAttribute(4, "ChildContent", (Microsoft.AspNetCore.Components.RenderFragment)((__builder2) => {
__builder2.OpenComponent<BMenuItem>(6);
__builder2.AddAttribute(7, "Route", "button");
__builder2.AddAttribute(8, "ChildContent", (Microsoft.AspNetCore.Components.RenderFragment)((__builder3) => {
__builder3.AddMarkupContent(9, "Button 按钮");
}
));
__builder2.CloseComponent();
}
}
}可以看到，NavMenu.razor 使用了 BMenu 这个组件,BMenu 又使用了 BMenuItem这个组件，共套了两层，因此生成了两个 ChildContent 的属性，而且属性类型都是 Microsoft.AspNetCore.Components.RenderFragment
到这儿为止，Blazor 的大概机制基本讨论了一半，接下来讨论上个流程图中的对比那一步，看看 Blazor 是如何进行的对比
这里不细说，因为确实太复杂我也没搞清楚，只说个大概流程，需要说明的一点是 Blazor 的对比是基于序列号的，序列号是什么？大家一定注意到上面代码中的 __builder.AddAttribute(4 中的这个 4 了，这个 4 就是序列号，然后每个序列号对应的内容称为帧，简而言之是通过判断每个序列号对应的帧是否一致来对比是否有改动
st=>start: 开始对比
seq=>operation: 循环每帧
compare=>condition: 序列号是否一致?
isComponent=>condition: 该帧是否都为组件？
render=>operation: 渲染该组件
compareParameter=>condition: 两边组件的参数是否有变化？
skip=>operation: 跳过该帧
setParameter=>operation: 设置新组件的参数，进入该组件的生命周期流程
currentSkip=>operation: 机制过于复杂，不讨论
e=>end: 对比结束
endSeq=>operation: 结束循环
st->seq->compare
compare(yes)->isComponent
compare(no)->currentSkip
isComponent(yes)->render->compareParameter
isComponent(no)->currentSkip
compareParameter(yes)->setParameter->endSeq->e
compareParameter(no)->skip流程图总算画完了，大概有以下几点需要注意：
结合所有流程图来看，Blazor 是否会进入死循环渲染取决于渲染队列是否清空，如果一直无法清空，那体现出来就是死循环，而且以这种机制还不大好排查到底是怎样的错误造成了死循环
还有一个关键的东西是 EventCallBack，一次写太多了，不想写了
园友如果有兴趣的话可以继续把这个写了
什么是前后端分离？
Blazor 出来的时候一堆人说什么 WebForm 又来了，Silverlight 又来了，还有啥啥乱七八糟的，最让我不能理解的是另一种说法：
我不敢瞎说，我找了一篇文章：https://www.jianshu.com/p/bf3fa3ba2a8f
下面是摘抄的内容
重点在于第二点，前后端分离就是把数据操作和显示分离出来，Blazor 并没有有非要让你用 .Net 写后端
第三点也说了，前端一般是 JS，那现在把 JS 换成 .Net 并没有什么不一样