StateHasChanged 用於特定組件，而不是重新渲染頁面中的所有組件

Question

我正在使用多個組件是我的應用程序每個都以有條件的方式呈現。 是否有可能單獨重新渲染特定組件？

MyRazor.razor文件，

 <button @onclick="Chnage">Second</button>
<div>
    @if (renderOne)
    {
        var data1 = Count++;
        <ComponentFirst>@data1</ComponentFirst>
    }
    @if (renderTwo)
    {
        var data2 = Count2++;
        <ComponentSecond class="btn-danger">@data2</ComponentSecond>
     }
</div>
@code { 
    void Chnage()
    {
        renderOne = true;
    }
}

ComponentFirst 和 ComponentSecond 通過各自的布爾值檢查來呈現。 在按鈕單擊中，我單獨啟用了 CompoenentFirst。 但是 ComponentSecond 也再次渲染。 我的目標是如果我單獨啟用 renderOne ComponentFirst 應該再次渲染。 如果我禁用 renderTwo ComponentTwo 應該再次渲染，而不是渲染兩個組件以在應用程序中進行一次更改。

Answer 1

您可能不應該擔心組件渲染很多次。 渲染只構建一個渲染樹，它不會更新瀏覽器的 DOM。 只有在構建了整個頁面的渲染樹后，Blazor 才會將其與最后一個渲染樹進行比較，然后從差異中更新 DOM。

話說回來：

如果父組件通過[Parameter]屬性（包括RenderFragment ）將任何信息傳遞給子組件，那么每當父組件重新渲染時，子組件也將重新渲染，以防萬一發生任何變化。

如果您希望組件獨立於其父組件重新渲染，那么您不應將任何 state 傳遞給它們。 您可以通過將 state 存儲在組件外部來實現此目的。 例如

public class MyState
{
  public int Count1 { get; set; }
  public int Count2 { get; set; }

  public event EventHandler<EventArgs> Changed;
  public void NotifyChanged() => Changed?.Invoke(this, EventArgs.Empty);
}

如果您將其注冊為可注入依賴項，則可以直接在子組件中使用它

@inject MyState State
@implements IDisposable

<div>
  The value is @State.Count1
</div>

@code
{
  protected override void OnInitialized()
  {
    State.Changed += DoUpdate;
  }

  void IDisposable.Dispose()
  {
    State.Changed -= DoUpdate; // Important1
  }

  private void DoUpdate(object sender, EventArgs e)
  {
    InvokeAsync(StateHasChanged);
  }
}

任何組件都可以通過注入MyState然后執行更新 state

injectedState.Counter1++;
injectedState.Counter2--;
injectedState.NotifyChanged();