внести небольшое изменение в большое приложение Blazor - PullRequest
Новая
       15

внести небольшое изменение в большое приложение Blazor

0 голосов
/ 21 мая 2019

Это продолжение аналогичного вопроса, который у меня был, но на этот раз с рабочим примером ниже.Это приложение повторно отображает / пересчитывает все приложение, даже если только небольшая часть нуждается в обновлении.

Откройте консоль, чтобы увидеть результаты.Цель состоит в том, чтобы уменьшить количество раз, когда печатается "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>

1 Ответ

0 голосов
/ 21 мая 2019

Вот мое решение моей проблемы. Это работает, но это немного запутанно, я надеюсь, что кто-то найдет лучший способ ...

По сути, я обертываю область, которую нужно обновить изолированно, <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); }
    }
...