时间戳

首页 > 解决方案 > Blazor 组件生命周期方法 OnParametersSet 行为

blazor - Blazor 组件生命周期方法 OnParametersSet 行为

问题描述

我正在学习 Blazor 并试图弄清楚组件生命周期方法的工作原理。

在我的 WASM 项目中，我创建了一个简单的组件：

public class TestComponent : ComponentBase
{
    [Parameter]
    public string Id { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        Console.WriteLine($"({Id}) {nameof(OnParametersSet)}()");
    }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        base.BuildRenderTree(builder);

        Console.WriteLine($"({Id}) {nameof(BuildRenderTree)}()");
        builder.AddContent(0, this.ChildContent);
    }
}

并在页面上添加了该组件的 2 个实例：

<TestComponent Id="TestComponent1">
    <input class="input" type="text" value="" />
</TestComponent>

<TestComponent Id="TestComponent2">
    <input class="input" type="text" value="" @onchange="() => { }" />
</TestComponent>

现在，当页面加载时，我在浏览器控制台中看到了这个日志：

blazor.webassembly.js:1 (TestComponent1) OnParametersSet()
blazor.webassembly.js:1 (TestComponent2) OnParametersSet()
blazor.webassembly.js:1 (TestComponent1) BuildRenderTree()
blazor.webassembly.js:1 (TestComponent2) BuildRenderTree()

这是预期的，因为组件刚刚创建。如果我更新TestComponent1值，什么都不会发生。

但是，如果我更新TestComponent2值，我会看到相同的日志。我猜那是因为TestComponent2附加了事件处理程序，这导致每次都更新组件。我被以下问题困扰：

组件初始化后或父组件重新渲染时

这些都不是我的情况，IMO。

标签： blazorblazor-webassembly

解决方案

But if I update TestComponent2 value I see the same log.

当您更新 TestComponent2 的值时，会触发 UI 事件并调用 StateHasChanged 方法来通知组件他的状态已更改并且应该重新渲染。当父组件重新渲染时，两个子组件都重新渲染：或者当父组件重新渲染时

您可以在父组件（OnAfterRender 方法）中测试，每次更新 TestComponent2 的值时，父组件都会重新渲染。

注意：如果您在父组件中放置“DoNothing”按钮而不是@onchange="() => { }"，则预期相同的行为。

所有这些都与 RenderFragment 委托属性 ChildContent 的使用有关，否则不会发生这两个子组件的重新渲染。也就是说，如果您不会在组件中使用子内容，则 OnParametersSet 将仅针对状态已更改的子组件触发。

这是github问题的链接，与您的问题类似...

推荐阅读