asp.net-core - Wrapper 和 Native razor 组件之间的区别

Question

我对 blazor-server-side 有一些澄清。blazor 本机组件和包装器组件有什么区别？谁能帮帮我吗？

Answer 1

免责声明：我没有使用 blazor，但自从它第一次演示以来，我就稍微关注了它，但我从未听说过原生和包装组件，文档也没有包含这个措辞。因此我可能是错的，但从措辞中我明白，“包装器”是指互操作性。

我将从这篇优秀的博客文章中引用一些文字

可能是native，因为该组件仅由没有 javascript 的 .NET bl(r)azor 创建：

由于 Razor 组件作为 .NET 标准应用程序在服务器端运行，因此逻辑是使用.NET 技术编写的。这是可能的，因为 Blazor 框架采用了 RenderTree，这是一种类似于 Angular 和 React 等流行 JavaScript 框架中使用的虚拟 DOM 的 DOM 抽象。让我们看一下框架的 UI 端，以了解组件是如何编写的。

<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick="@IncrementCount">
  Click me
</button>

@functions {
  int currentCount = 0;

  [Parameter] protected int CountBy { get; set; } = 1;

  void IncrementCount()
  {
    currentCount += CountBy;
  }
}

可能是wrapper，因为我们在组件中使用了互操作层一个 JS 函数。

此外，Razor 组件应用程序可以使用 JavaScript 生态系统的依赖项，并且通过互操作层，应用程序可以与.NET 和 JavaScript 依赖项进行双向通信。这对于 Razor 组件不支持必要的浏览器/DOM API 或现有 JavaScript 库有用的情况很有帮助。

地理位置.cs (.NET)

public class Geolocation
{
  // ...

  public async Task GetCurrentPosition(
    Action<Position> onSuccess,
    Action<PositionError> onError,
    PositionOptions options = null)
  {
    OnGetPosition = onSuccess;
    OnGetPositionError = onError;
    await JSRuntime.Current.InvokeAsync<bool>(
      "interopGeolocation.getCurrentPosition",
      new DotNetObjectRef(this),
      options);
  }

  // ...
}

interopGeolocation.js（浏览器）

window.interopGeolocation = {
  getCurrentPosition: function (geolocationRef, options) {
    const success = (result) => {
      geolocationRef.invokeMethodAsync(
        'RaiseOnGetPosition',
        interopGeolocation.toSerializeable(result));
    };
    const error = (er) =>
    geolocationRef.invokeMethodAsync(
      'RaiseOnGetPositionError',
      er.code);
    navigator.geolocation.getCurrentPosition(
      success,
      error,
      options);
},

// ...