我应该何时调用 StateHasChanged 以及 Blazor 何时自动拦截某些更改？

我很难理解什么时候应该打电话StateHasChanged()当 Blazor 拦截到某些内容发生更改时，必须重新渲染。

我创建了一个示例项目，其中包含一个按钮和一个名为 AddItem 的自定义组件。该组件包含一个带有红色边框的 div 和一个按钮。

我所期望的：我希望当用户单击索引页面中包含的按钮时，AddItem 的 div 将显示。然后我想在用户单击 AddItem 的按钮时隐藏它。

Note:AddItem 不公开它_isVisible外面的标志，而是包含一个Show()方法。所以AddItems.Show()单击索引按钮时将调用。

Tests:

1. 我单击索引的单击按钮，然后单击方法Open() and AddItem.Show()被调用。旗帜_isVisible被设定为true但什么也没发生，索引的ShouldRender()被调用。

   控制台输出：

   • 渲染索引

2. 我已经修改了AddItem.Show() with public void Show() {_isVisible = true; StateHasChanged();}。现在 AddItem 的 div 按预期显示和隐藏。

   控制台输出：

   • 渲染 AddItem（1° 单击索引按钮）
   • 渲染索引（1° 单击索引按钮）
   • 渲染 AddItem（2° 单击 addItem 的关闭按钮）

3. 我已经修改了<AddItem @ref="AddItem" /> with <AddItem @ref="AddItem" CloseEventCallback="CallBack" />, 删除StateHasChanged来自 AddItem 的Show()方法。现在 AddItem 的 div 按预期显示和隐藏。

基于测试 3：为什么我不必明确StateHasChanged如果我设置 AddItem 的CloseEventCallback有哪位家长有方法吗？我很难理解它，因为 AddItem 不调用CloseEventCallback任何地方。

and

当 Blazor 了解到某些内容已更改因此必须重新渲染时？

我的示例代码（如果您想尝试的话）。

我的索引.razor

<AddItem @ref="AddItem" />
<button @onclick="Open">click</button>
@code {
    AddItem AddItem;

    public void Open()
    {
        AddItem.Show();
    }

    public void CallBack()
    {
    }

    protected override bool ShouldRender()
    {
        Console.WriteLine("Render INDEX");
        return base.ShouldRender();
    }
}

我的 AddItem 组件

@if (_visible)
{
    <div style="width: 100px; height: 100px; border: 1px solid red">testo</div>
    <button @onclick="Close">close</button>    
}

@code {
    private bool _visible = false;

    [Parameter] public EventCallback<bool> CloseEventCallback { get; set; }

    public void Show()
    {
        _visible = true;
    }

    public void Close()
    {
        _visible = false;
    }

    protected override bool ShouldRender()
    {
        Console.WriteLine("Render ADDITEM");
        return base.ShouldRender();
    }
}

一般来说，StateHasChanged()方法会在UI事件触发后自动调用， 例如，单击按钮元素后，将引发单击事件，并且 StateHasChanged() 方法是 自动调用以通知组件其状态已更改并且应该重新渲染。

最初访问 Index 组件时。先渲染父组件，再渲染父组件 渲染它的孩子。

每当单击“打开”按钮时，索引组件就会重新呈现（这是因为 事件的目标是父组件，默认情况下会重新渲染 （无需使用 StateHasChanged）。但孩子却不然，他不知道自己的 状态已改变。为了让孩子意识到他的状态已经改变了， 应该重新渲染，您应该添加对 StateHasChanged 方法的调用 在 Show 方法中手动。现在，当您单击“打开”按钮时，子组件是 首先重新渲染，然后其父级接下来重新渲染。现在红色 div 变得可见。

单击“关闭”按钮隐藏红色 div。这次只有子组件重新渲染 （这是因为事件的目标是子组件，默认会重新渲染）， 但不是父母。

这种行为是正确的并且是有意设计的。

如果从 AddItem.Show 方法中删除对 StateHasChanged 方法的调用，请定义此 财产：[Parameter] public EventCallback<bool> CloseEventCallback { get; set; }，并添加 父组件中的组件属性，用于为此属性分配值，如下所示：<AddItem @ref="AddItem" CloseEventCallback="CallBack" />，你会发现外表没有任何变化， 但这次单击“打开”按钮时重新渲染的顺序首先是父级 重新渲染，然后子进程重新渲染。这准确地描述了您发现的问题 在你的评论中的问题中：

那么，为什么即使没有在任何地方调用 CloseEventCallback，我的测试 3 仍能按预期工作？

你是对的......在进行进一步调查之前我无法真正解释这种行为。我会尽力查明发生了什么事，然后告诉你。

AddItem 的 close 方法调用 CloseEventCallback 来通知父级它应该重新呈现。

注意：您的代码使用布尔类型说明符定义 CloseEventCallback，因此您必须定义一个方法 在具有布尔参数的父组件中。当您调用 CloseEventCallback“委托”时 您实际上调用了 Index.Callback 方法，并且应该向其传递一个布尔值。当然，如果你通过了 一个组件的值，您希望它重新渲染，以便可以在 UI 中看到新的状态。这就是 EventCallback 提供的功能：虽然事件是在子组件中触发的， 它的目标是父组件，这会导致父组件重新渲染。

我想知道为什么如果调用订阅的 EventCallback 之一，父组件应该重新渲染自身？

这正是我在上一段中试图解释的内容。 EventCallback类型是专门为了解决事件目标的问题而设计的，将事件路由到组件 其状态已更改（父组件），并重新渲染它。