Blazor语言 - Avoid OnInitialized/OnInitializedAsync

Question

我在Blazor中创建了两个组件，当按下按钮时它们会被切换，如下所示:

<div class="row full-height">
<div class="col-md-12">
@if (condition)
{
<Component1 Parameter="foo"> 
</Component1>
}
else
{
<Component2 Parameter="bar"></Component2>
}
</div>
</div>

当其中一个组件呈现时，它再次执行OnInitialized和OnInitializedAsync。我想知道是否有一种方法可以在这些方法中只执行一次代码。

非常感谢!

Answer 1

你的问题是你每次切换时都要删除和添加组件到RenderTree

在每个组件上使用一个简单的Show参数。组件现在只有在Index第一次渲染时才被添加到RenderTree中。

下面是一个快速演示:

组件1

@if (this.Show)
{
<h3>Component1</h3>
<div>Rendered at : @rendertime</div>
}
@code {
[Parameter] public bool Show { get; set; }
string rendertime;
protected override void OnInitialized()
{
rendertime = DateTime.Now.ToLongTimeString();
base.OnInitialized();
}
}

组件2

@if (this.Show)
{
<h3>Component2</h3>
<div>Rendered at : @rendertime</div>
}
@code {
[Parameter] public bool Show { get; set; }
string rendertime;
protected override void OnInitialized()
{
rendertime = DateTime.Now.ToLongTimeString();
base.OnInitialized();
}
}

index.razor

@page "/"
@using StackOverflow.Answers.Components
<Component1 Show="_show1"/>
<Component2 Show="_show2"/>
<div class="m-2 p-2">
<button class="btn btn-dark" @onclick="ShowComponent1"> Toggle 1</button>
<button class="btn btn-secondary ms-2" @onclick="ShowComponent2"> Toggle 2</button>
<button class="btn btn-primary ms-2" @onclick="Toggle"> Toggle</button>
</div>
@code {
bool _show1;
bool _show2;
void ShowComponent1()
{
_show1 = !_show1;
}
void ShowComponent2()
{
_show2 = !_show2;
}
void Toggle()
{
if (_show2)
{
_show2 = false;
_show1 = true;
}
else
{
_show2 = true;
_show1 = false;
}
}
}