对大型 Blazor 应用程序进行小改动答案

【问题标题】：make a small change to a large Blazor App对大型 Blazor 应用程序进行小改动
【发布时间】：2019-10-07 08:00:20
【问题描述】：

这是对我遇到的类似问题的跟进，但这次是下面的一个工作示例。这个应用程序会重新渲染/重新计算整个应用程序——即使只有一小部分需要更新。

打开控制台查看结果。目标是减少"Monstor.Build..." 的打印次数。

@page "/monstor"

@functions {
    static int redraw = 0;
    static bool doWork = true;
    string status = "--";

    void HandleEvent(string anEvent) {
        status = anEvent; // updates every 2 seconds
        StateHasChanged(); // renders MonstrouslyDeepApp--every 2 seconds!
    }

    async Task work() { // simulate external events
        if (doWork) {
            doWork = false;
            while (true) {
                await Task.Delay(2000);
                HandleEvent(DateTime.Now.ToLongTimeString());
            }
        }
    }
    protected override void OnInit() {
        work();
    }
    void Also_do_monstrous_business_calculations(int x) {
        System.Console.WriteLine("   Calculating...");
    }
}

@{
    Also_do_monstrous_business_calculations(42);
}

<div class="main">
    <div class="toolbar row bg-light">
        <span style="width:100%;text-align:right"> Status: @status </span>
    </div>
    <div class="main-app row jumbotron">
        <h1>I am Monstor App # @redraw. Fear me!</h1>
        @*<MonstrouslyDeepApp M="@ModelRoot" />*@
        @{
            System.Console.WriteLine($"   Monster.Build #{redraw}");
            redraw++;
        }
    </div>
</div>

【问题讨论】：

您应该避免在视图中进行大量计算。尝试先计算它，然后将结果保留为可以重复用于多次渲染的状态。
你还没有弄清楚为什么你需要这个非常奇怪的设置。或者为什么“状态”不能移动到它自己的组件。为什么要在 @functions { } 之外运行该方法？

标签： asp.net-core razor blazor

【解决方案1】：

这是我的问题的解决方案。它有效，但它有点令人费解，我希望有人找到更好的方法......

基本上，我用<Updatable> 包裹要隔离更新的区域：

<div class="main">
    <Updatable Event="@statusEvent">
        <div class="toolbar row bg-light">
            <span style="width:100%;text-align:right"> Status: @status </span>
        </div>
    </Updatable>
      :
</div>

您像这样定义和使用statusEvent：

@functions {
      :
    string status = "--";
    UpdateEvent statusEvent = new UpdateEvent();

    void HandleEvent(string anEvent) {
        status = anEvent; // updates every 2 seconds
        //StateHasChanged(); // renders MonstrouslyDeepApp--every second!
        statusEvent.StateChanged(); // only renders status area--every second
    }
      :
}

在 Updatable.razor 中：

@page "/Updatable"

@functions {
    [Parameter] UpdateEvent Event { get; set; }
    [Parameter] RenderFragment ChildContent { get; set; }

    protected override void OnInit() {
        Event.OnChange += (s, e) => {
            StateHasChanged();
        };
    }
}

@ChildContent

最后，UpdateEvent 只是一个事件包装器：

    public class UpdateEvent {
        public event EventHandler OnChange;
        public void StateChanged() { OnChange?.Invoke(this, EventArgs.Empty); }
    }

【讨论】：