Blazor SetParametersAsync 和 OnParametersSet

在 Blazor 应用中，组件之间经常需要传递数据。当父组件向子组件传递参数时，Blazor 框架会调用子组件的 SetParametersAsync 方法来异步设置这些参数，并在参数设置完成后调用 OnParametersSet 方法进行同步处理。这两个方法在组件生命周期中扮演着重要角色，特别是在处理参数变化时。

下面，我们将通过一个简单的例子来深入了解 SetParametersAsync 和 OnParametersSet 的使用。

首先，我们创建一个 ChildComponent.razor 的子组件。这个组件接受一个字符串参数 Message，并在页面上显示它。同时，它还维护了一个 ConsoleMessage 字符串，用于在控制台上记录参数设置的过程。

<p>Message: @Message</p>
<p>Parameters: @Parameters</p>
<p>Console Message: @ConsoleMessage</p>

@code {
    [Parameter]
    public string Message { get; set; }

    public string ConsoleMessage { get; set; }

    public string Parameters { get; set; }

    public override async Task SetParametersAsync(ParameterView parameters)
    {
        //从ParameterView 中取出新的参数值
        foreach (var parameter in parameters)
        {
            switch (parameter.Name)
            {
                case nameof(Message):
                    Parameters += (string)parameter.Value + "\n";
                    break;
                // 其他参数的处理
                default:
                    break;
            }
        }
        await base.SetParametersAsync(parameters);
        ConsoleMessage += "ChildComponent SetParametersAsync 被调用，Message: " + Message + "\n";
        // 在这里可以执行异步参数设置逻辑
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        ConsoleMessage += "ChildComponent OnParametersSet 被调用，Message: " + Message + "\n";
        // 在这里可以执行同步参数设置逻辑
    }
}

在 ChildComponent.razor 中，SetParametersAsync 方法是异步的，它首先调用基类的 SetParametersAsync 方法来实际设置参数，然后记录一条消息到 ConsoleMessage中。OnParametersSet 方法则是同步的，它在参数设置完成后被调用，也用于记录消息。

接下来，我们创建一个 ParentComponent.razor 的父组件。这个组件使用了 ChildComponent.razor 子组件。

@page "/lifecycle-example2"
@rendermode @(new InteractiveServerRenderMode(prerender: true))

<h1>Parent Component</h1>

<button @onclick="ChangeMessage">Change Message</button>

<ChildComponent Message="@currentMessage" />

@code {
    private string currentMessage = "Hello from Parent";

    private void ChangeMessage()
    {
        currentMessage = "Updated message from Parent";
    }
}

在实际应用中，当 ParentComponent.razor 向 ChildComponent.razor 传递新的参数时，Blazor 框架会自动调用子组件的 SetParametersAsync 方法。

一旦参数被成功设置，Blazor 会调用 OnParametersSet 方法。这是一个同步回调，用于执行那些不需要等待异步操作完成就可以进行的逻辑。在这个方法中，我们可以安全地引用已经设置好的参数值。

SetParametersAsync 和 OnParametersSet 是 Blazor 组件生命周期中处理参数变化的重要方法。它们允许我们在参数设置前后执行特定的逻辑，无论是异步还是同步。以下是对这两个方法的进一步说明和补充。

SetParametersAsync 方法在组件的参数更新时被调用。这个方法是异步的，允许我们在设置参数之前或之后执行任何需要等待的操作，例如从服务器获取数据或执行其他异步任务。

在 SetParametersAsync 中，我们可以通过 ParameterView 参数访问到新的参数值。调用 base.SetParametersAsync(parameters) 是必要的，因为它会实际更新组件的属性值。在调用基类的 SetParametersAsync 方法之后，我们可以执行任何依赖于新参数值的异步操作。

需要注意的是，SetParametersAsync 是在组件的渲染过程中调用的，因此我们不应该在这个方法中改变组件的状态以触发额外的渲染，这可能导致无限循环。

OnParametersSet 方法在参数被设置后立即调用，并且是在 SetParametersAsync 完成之后同步执行的。这个方法允许我们执行那些不需要等待异步操作完成的逻辑，比如初始化组件状态、验证参数值或触发其他不依赖于异步操作的逻辑。

在 OnParametersSet 中，我们可以安全地引用已经设置好的参数值，因为 SetParametersAsync 已经完成了它的工作。这是一个很好的地方来执行任何需要在组件渲染之前完成的同步逻辑。

当我们需要在参数更新后执行异步操作时，使用 SetParametersAsync。例如，我们可能需要基于新的参数值从服务器获取数据。
当我们需要在参数更新后执行同步操作时，并且这些操作不依赖于异步任务时，使用 OnParametersSet。例如，我们可能需要基于新的参数值来初始化组件的内部状态。

我们应该避免在 SetParametersAsync 或 OnParametersSet 中直接改变组件的状态以触发额外的渲染，因为这可能导致渲染循环。
我们应该确保我们的异步逻辑在 SetParametersAsync 中得到妥善处理，避免可能的竞态条件或状态不一致的问题。
在 OnParametersSet 中，我们可以安全地访问和使用已经设置好的参数值，但不应该再次调用 SetParametersAsync 或其他可能导致重新渲染的方法。

通过正确理解和使用 SetParametersAsync 和 OnParametersSet，我们可以更好地控制 Blazor 组件的参数更新和渲染过程，实现更灵活和高效的组件逻辑。

示例代码

ChildComponent.razor
ParentComponent.razor