包装器和本机剃须刀组件之间的区别

Question

我对 blazor 服务器端有一些说明。 Blazor 本机组件和包装器组件之间有什么区别？有人可以帮我吗？

Answer 1

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

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

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

由于 Razor 组件作为 .NET 标准应用运行服务器端，因此逻辑是使用.NET 技术编写的。这是可能的，因为Blazor框架采用了RenderTree，这是一个类似于流行的JavaScript框架(如Angular和React)中使用的虚拟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;
}
}

可能是包装器，因为我们在组件中使用了互操作性层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);
}
// ...
}

互操作地理位置.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);
},
// ...