Оптимизация рендеринга Blazor для компонентов, управляемых данными - PullRequest
0 голосов
/ 15 января 2020

Я застрял, как оптимизировать рендеринг типичного компонента Blazor, управляемого данными. Рассмотрим следующий упрощенный компонент (частичный):

public partial class FooComponent: ComponentBase
{
    [Inject]
    protected IBarService BarService { get; set; }

    [Parameter]
    public string OptionalParameter1 { get; set; }

    [Parameter] 
    public string OptionalParameter2 { get; set; };

    protected IEnumerable<BarItem> Items { get; set; }

    protected override Task OnParametersSetAsync()
    {
        this.Items = await this.BarService.GetItemsAsync(this.OptionalParameter1, this.OptionalParameter2);
    }
}

Компонент имеет два необязательных параметра. Обычно это могут быть некоторые значения фильтрации для служебного вызова. Компонент не имеет возможности узнать, будет ли какой-либо из этих параметров установлен родительским компонентом (поскольку они являются необязательными). Всякий раз, когда параметр установлен, компонент получает список BarItem элементов через (дорогой) вызов службы asyn c. Затем разметка компонента каким-то образом отображает список Items.

Проблема заключается в том, что OnParametersSetAsync вызывается каждый раз, когда задается параметр, в результате чего компонент повторно выполняет рендеринг и выполняет другой вызов службы. Я могу частично оптимизировать это, проверяя, изменились ли значения параметров, но все равно будет несколько вызовов службы.

  • Если оба параметра никогда не установлены, вызов службы происходит один раз (хорошо).
  • Если установлен один параметр, сервисный вызов происходит дважды (первый раз с неправильными значениями параметров).
  • Если оба параметра установлены, сервисный вызов происходит 3 раза (первые 2 раза с неправильными значениями параметров) ).

В реальном компоненте с большим количеством свойств это может быстро привести ко многим нежелательным вызовам службы. Если OnParametersSetAsync будет вызван один раз для всех параметров, это не будет проблемой (я понимаю, что Blazor не работает таким образом).

Могу ли я сделать так, чтобы вызовы службы происходили только один раз с правильными значениями параметров? Мне кажется, что это очень распространенный сценарий в компонентах, управляемых данными, и это будет реальным недостатком для Blazor, если это невозможно реализовать (эффективно).

1 Ответ

0 голосов
/ 15 января 2020

Вчера в деле tnet Conf Focus Blazor, Даниэль Рот продемонстрировал нечто подобное. Для решения проблемы вы можете использовать таймер, который запускается каждый раз, когда один из параметров установлен. И если таймер достигает лимита времени, вы вызываете поисковый запрос. Это называется debounce.

Ссылка Youtube на часть

Я постараюсь выкопать репозиторий github для демонстрации, если смогу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...