Blazor: выполнение нерелевантного блока кода при обновлении пользовательского интерфейса - PullRequest
Новая
       117

Blazor: выполнение нерелевантного блока кода при обновлении пользовательского интерфейса

0 голосов
/ 20 июня 2020

В приведенном ниже примере кода я добавляю компонент Counter к counters только один раз, когда страница сначала инициализируется, и используя событие onclick кнопки «получить счетчик», я получаю Count из counters; 

@page "/"

<button @onclick="@(() => count = counters.Count)">get count</button>

<p>Count: @count</p>

@for (int i = 0; i < 1; i++)
{
    counters.Add(new Counter());
}

@code {
    private int count;
    private List<Counter> counters;

    protected override void OnInitialized()
    {
        counters = new List<Counter>();
    }
}

Но почему каждый раз, когда я нажимаю кнопку «получить счет», переменная count увеличивается на единицу? (как будто блок @for также выполняется)

Blazor WebAssembly 3.2.0

1 Ответ

0 голосов
/ 20 июня 2020

Конечно, блок @for также выполняется. В противном случае, как вы могли бы увеличить значение переменной count на единицу, когда в список добавляется новый объект Counter. -рендеринг компонента; таким образом, вся часть представления компонента повторно визуализируется. Возможно, вы думали, что выполняется только лямбда-выражение? Фактически, весь вид перерисовывается. Опять же, это фундаментальный принцип Blazor, который вы должны хорошо понимать и принимать во внимание при разработке компонентов.

Как бы то ни было, вам не следует создавать экземпляры таких компонентов. Компоненты - это классы, которые считаются особым случаем, потому что они должны быть созданы только как элементы, как, например, <Counter/>. Причина этой аномалии заключается в том, что компоненты представляют собой объекты, которые отображаются как Html элементы DOM, и при их создании требуется особая обработка системы. Когда вы создаете компонент с новым ключевым словом, эта обработка не происходит, и объект рендеринга не задействуется.

Однако вы можете создать коллекцию ссылок компонентов на компоненты, например: 

<Counter @ref="counter1" />

@code
{
   private Counter counter1;
}

Надеюсь, это поможет ...

...