c# - Blazor 与 Razor

Question

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

https://github.com/SteveSanderson/Blazor

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

Answer 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)中已经使用的想法的启发，并将在博文中详细介绍概念，例如:

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

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

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

总结

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

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

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

第 3 方编辑自 2018-09-26

在 .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");
        }
     }
}