Blazor 组件生命周期方法 OnParametersSet 行为答案

【问题标题】：Blazor component lifecycle method OnParametersSet behaviorBlazor 组件生命周期方法 OnParametersSet 行为
【发布时间】：2020-11-10 10:35:50
【问题描述】：

我正在学习 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 附加了事件处理程序，这会导致每次都更新组件。我被以下问题困扰：

为什么更新TestComponent2 值会触发TestComponent1 的生命周期方法？它们之间有什么关系？
为什么OnParametersSet 被解雇了？根据official documentation，应该调用这个方法：

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

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

【问题讨论】：

标签： blazor blazor-webassembly

【解决方案1】：

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

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

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

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

这一切都与使用RenderFragment委托属性ChildContent有关，没有它，这两个子组件的重新渲染将不会发生。也就是说，如果你不会在你的组件中使用子内容，OnParametersSet 只会为状态发生变化的子组件触发。

这里是 a link 到 github 的问题，与您的问题类似...

【讨论】：