在Blazor中使用_host.cshtml的预渲染时，如何停止渲染两次(对于非数据检索组件)

Question

我有一些变量在剃刀页面的代码段中初始化，当我开始在应用程序中使用_Host.cshtml从服务器进行预呈现时，它们初始化了两次。在UI中加载客户端部件的第二次渲染过程中，如何避免这些初始化？

public string isVisible="hidden";
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
isVisible = "visible";
}
}

这个变量返回到值"0"；隐藏的"；在第二次渲染中。请帮助如何防止这种情况。

Answer 1

来自以下站点：预提交后的状态重新连接

在Blazor Server应用程序中，当RenderMode为ServerPrerender时，组件最初会作为页面的一部分静态呈现。一旦浏览器建立了与服务器的SignalR连接，该组件将再次呈现并交互。如果存在用于初始化组件的OnInitialized｛Async｝生命周期方法，则该方法将执行两次：

静态预呈现组件时。在建立服务器连接之后。当组件最终渲染时，这可能会导致UI中显示的数据发生明显变化。为了避免Blazor Server应用程序中的这种双重呈现行为，请传入一个标识符，以便在预呈现期间缓存状态，并在预呈现之后检索状态。

以下代码演示了基于模板的Blazor Server应用程序中更新的WeatherForecastService，该应用程序避免了双重渲染。在下面的示例中，等待的Delay(await Task.Delay(…((模拟从GetForecastAsync方法返回数据之前的短延迟。

WeatherForecastService.cs

using System;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.Extensions.Caching.Memory;
using BlazorSample.Shared;
public class WeatherForecastService
{
private static readonly string[] summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild",
"Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
public WeatherForecastService(IMemoryCache memoryCache)
{
MemoryCache = memoryCache;
}
public IMemoryCache MemoryCache { get; }
public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
{
return MemoryCache.GetOrCreateAsync(startDate, async e =>
{
e.SetOptions(new MemoryCacheEntryOptions
{
AbsoluteExpirationRelativeToNow =
TimeSpan.FromSeconds(30)
});
var rng = new Random();
await Task.Delay(TimeSpan.FromSeconds(10));
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = summaries[rng.Next(summaries.Length)]
}).ToArray();
});
}
}

Answer 2

<div class="page_body">
<div class="navbar navbar-expand-lg navbar-light navbar_cs">
<NavMenu Width="@ScreenWidth" />
</div>
<div style="visibility:@isVisible">
<CarouselBlock imageset="@CDNImages" />
@Body
</div>
<div class="footer">
<FooterMenu />
</div>
</div>

上面的代码在MainLayout.razor文件的Html段中，下面的代码在代码段中。

@inherits LayoutComponentBase
@inject BrowserService Service
@inject CarouselService cs
public int ScreenWidth { get; set; }
private List<string> CDNImages;
protected override void OnInitialized()
{
base.OnInitialized();
try
{
isVisible = "visible";
ScreenWidth = Service.GetDimension().Width;
Console.WriteLine("initializing");
}
catch (Exception e)
{
Console.WriteLine("Error occurred " + e.ToString());
}
}
protected override void OnParametersSet()
{
base.OnParametersSet();
CDNImages = cs.GetImages();
Console.WriteLine("images are set in onParameterSet");
//   isVisible = "visible";
}
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
//  isVisible = "visible";
}
}

CarouselService.cs中的方法如下，它为CarouselBlock组件提供了字符串列表。

public List<string> GetImages() 
{
for (int i = 1; i <= 3; i++)
{
paths.Add(FolderPath + Province + "/test" + i + ".png");
}
return paths;
}

这是我为应用程序中的登录页编写的全部代码，我只想防止页面重新渲染，因为我已经在使用_Host.cshtml从服务器进行预渲染了。

这是我用于预渲染的参考：页面链接

请告诉我如何在浏览器中单击刷新按钮时防止页面出现闪烁效果。