Blazor 与 Razor

Posted 2023-03-27

【中文标题】Blazor 与 Razor

【英文标题】：Blazor vs Razor

【发布时间】：2018-07-17 06:21:28

【问题描述】：

随着 Blazor 的发明，我想知道这两种语言之间是否有显着的效率（在创建代码和实际编译/执行代码方面）？

https://github.com/SteveSanderson/Blazor

如果有人实际实现了它，与普通的旧 Razor 相比，您是否进行过任何性能测试，或者有关于代码编写过程的轶事（是的，抱歉，抱歉，我请求这个）反馈？

【问题讨论】：

Blazor 只是一个使用 razor 语言客户端的框架。它们不能直接比较，一种是带有 c# 的标记语言，一种是允许您运行 c# 代码的项目，因此可以在浏览器中运行 razor 视图引擎

最大的不同是 Blazor 将一些代码编译成 Web Assembly。 （而且我相信 .NET 组件与它捆绑在一起）从我目前所读到的内容来看，Web Assembly 在访问 DOM 时速度很慢。 javascript 在这方面更好。当您想要在画布内制作动画时，Web Assembly 的速度就会得到提升。

这是一篇关于它的好文章：telerik.com/blogs/difference-between-blazor-vs-razor

【参考方案1】：

我在下面提供的信息主要是从Steven Anderson's Feb. 2 Blog entry 和我自己对项目目标的理解中转述的：

Blazor 旨在结合当前 .NET Razor 堆栈中的想法 具有现代 SPA 框架架构。

代码创建

旨在灵活并鼓励基于组件的布局，如下例所示：

<div class="my-styles">
   <h2>@Title</h2>
   @RenderContent(Body)
   <button onclick=@OnOK>OK</button>
</div>

@functions 
    public string Title  get; set; 
    public Content Body  get; set; 
    public Action OnOK  get; set; 

在 html 标记中创建一个可重用的组件：

<MyDialog Title="Ski Lift controls" onOK="DismissSkiDialog">
    Gondola @gondolaId is now <em>running</em>
</MyDialog>

执行

预计 Blazor 会很快，因为 webAssembly 很快。它编译为由浏览器的 wasm 加载器直接执行的字节码。例如，在javascript中，需要先加载.js文件并将单独的文件合并，然后解析和标记化并构建成树结构，然后可以由浏览器的javascript引擎解释（chrome's v8 engine，例如)。

有关 webAssembly 和 javascript 执行的深入比较，请参阅this post。

SPA 架构和设计

由于已经为 web 构建了很棒的 javascript 框架，Blazor 受到了 React、Vue 和 Angular 等现代框架中已经使用的想法的启发，并将在帖子中详细介绍一些概念，例如：

布局 路由 依赖注入 延迟加载 单元测试

请注意，虽然这些概念存在于 Razor 的服务器端，但并非所有概念都存在于客户端。前端路由在 Razor 中不可用，并且经常与 javascript 框架结合以填充该场景。

我个人曾与 AngularJs 一起开发过为 Razor 页面提供服务的企业应用程序。它有时会变得凌乱，而且从不觉得“干净”。

总结

Razor 是一种基于服务器架构的解决方案，可以处理 api 逻辑和服务器端模板，但它不能提供 javascript 之外的客户端逻辑。

Blazor 是下一步（希望是继任者），它将允许与 Razor 相同的服务器端功能，但将使用 C# 而不是 javascript 集成客户端逻辑。

我目前正在使用 Blazor 进行小型测试项目，到目前为止，我发现它易于使用。但正如博客和 GitHub 页面上的警告所示，它甚至还没有接近生产就绪。

2018 年 9 月 26 日的第 3 方编辑

在 .NET Conf 2018 中宣布Razor components ("server-side Blazor") will be part of .NET Core 3.0。显示此代码：

// inside index.cshtml - serverside use of blazor
<SurveyPrompt Title="How is Blazor working for you?" />
<div>
     <img id="bot" src="@imageurl" />
<div>
<button class="btn btn-primary" onclick="@changeImage">Click me</button>

@functions

    string imageurl = "/images/dotnet-bot-1.png";

    void changeImage()
    
        if(imageurl.Contains("1"))
        
            imageurl= imageurl.Replace("1", "2");
         
        else 
        
            imageurl= imageurl.Replace("2", "1");
        
     

【讨论】：

您应该在示例中使用code，而不是functions。

这个答案可以使用更新:)

自从写了这个答案后，我就没有关注 Blazor 的发展。请随时根据需要提出建议/编辑

【参考方案2】：

简而言之：

Razor 是.NET 的流行模板标记语法。 Blazor (Browser + Razor) 是一个.NET-based web 框架，可以使用WebAssembly 在客户端运行或通过SignalR 在服务器上运行。

举个例子，Razor 是您在使用 ASP.NET 创建 Web 应用程序时使用的语法，您可能以前见过：

<h1>
  Hello @Model.Username
</h1> 

剃须刀负责根据模型中的数据渲染您的HTML，同时还支持各种条件和循环。

另一方面，Blazor 是一种类似于 ASP.NET Core 和 ASP.NET MVC 的技术：

它为 Web 应用程序提供支持 它使用 Razor 作为创建 UI 的模板语法。一个常见的误解是 Blazor 使用 Razor。另外两个类似的术语（Blazor 组件和 Razor 组件）进一步加剧了这种情况。这些可以互换使用，但正确的术语是 Razor 组件。组件是标记（用 HTML 编写）和逻辑（用 C# 编写）在单个 Razor 文件（扩展名为 .cshtml）中的组合。

您可以找到更多信息here。

【参考方案3】：

您可以将 Blazor 称为具有额外功能的 Razor 组件！ Razor 系列的其他变体是 Razor 视图和 Razor 页面。 ASP.NET 将它们全部合并在一起，您可以在一个项目中拥有并使用它们。它们只是 ASP.NET Core 中的服务，你可以只注册或注入你想要的东西，这是 ASP.NET 的一个非常好的特性。检查 eShopOnWeb 参考应用程序。 eShopOnWeb