StateHasChanged цели в Blazor

Question

Посмотрите на этот самый базовый c компонент:

<div>
    @param1
    <button @onclick="@btn_on_click">Cliquez là</button>
</div>

@code
{
    [Parameter]
    public int param1 { get; set; }

    [Parameter]
    public Action<int> on_evt_test_fire { get; set; }

    void btn_on_click()
    {
        param1 += 1;
        this.on_evt_test_fire(param1);
    }
}

И посмотрите на этот самый базовый c Страница:

@message

<button @onclick="@on_btn_click">Click me</button>

<MyComponent param1="1"  on_evt_test_fire="@on_evt" />
<MyComponent param1="2" on_evt_test_fire="@on_evt" />

@code 
{
    private String message = "";

    private void on_evt(int param_evt)
    {
        message = "Button clicked inside component";

        StateHasChanged();
    }

    private async Task on_btn_click()
    {
        message = "Button clicked in this page";
    }
}

У меня проблема с StateHasChanged () .

• Мой первый вопрос: почему я должен вызывать StateHasChanged в on_evt, тогда как в on_btn_click это не нужно. Единственная разница между этими двумя методами заключается в том, что первый вызывается изнутри компонента. Почему я должен вызывать StateHasChanged в этом конкретном c случае?

• Когда я вызываю StateHasChanged (), 2 компонента сбрасываются: они принимают свои начальные значения ...

Спасибо за помощь

Answer 1

, тогда как в on_btn_click это не нужно

В on_btn_click это не нужно, поскольку метод StateHasChanged автоматически вызывается для событий пользовательского интерфейса.

[Parameter]
  public Action<int> on_evt_test_fire { get; set; }

Вы не должны не используйте делегат Action. Вместо этого используйте EventCallback «делегат», например:

Примечание. При использовании делегата Action целью события является текущий компонент (дочерний компонент), но при использовании EventCallback целью является родительский компонент. Вот почему вам не нужно добавлять вызов в метод StateHasChanged. Перед обнаружением EventCallback мы должны были вызвать метод StateHasChanged. Это был возраст go ...

[Parameter]
public EventCallback<int> on_evt_test_fire { get; set; }

И вы должны называть это так:

public async Task btn_on_click()
{
   if( on_evt_test_fire.HasDelegate)
   {
       temp++;
       await on_evt_test_fire.InvokeAsync(temp);
    }
 }

Вы не должны использовать параметр param1 для увеличения его значения. Определите новую переменную и присвойте ей значение param1 в методе OnInitialized следующим образом:

  protected override void OnInitialized()
  {
      temp = param1;
  }

Когда я вызываю StateHasChanged (), 2 компонента сбрасываются: они принимают свои начальные значения ..

-

Не создавать компоненты, которые записывают свои свойства параметров. Параметры перезаписываются при следующих условиях:

• Содержимое дочернего компонента отображается с помощью RenderFragment.

• StateHasChanged вызывается в родительском компоненте. Параметры сбрасываются, потому что родительский компонент перерисовывается при вызове StateHasChanged и новые значения параметров передаются дочернему компоненту.

Источник здесь:

Подробнее здесь:

Answer 2

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

Ваши компоненты сбрасываются, потому что вы говорите им об этом из Parent. Если вы хотите сохранить состояние, вам придется отделить его от параметра:

[Parameter]
public int param1 { get; set; }

int value1;

override void OnInitialized() { value1 = param1; }

, а затем показать @value1, а также увеличить значение1.

Answer 3

Ответы от @Henk и @SilenceAmongCrows правильные. Еще одна вещь, которую нужно добавить, это то, что в вашем дочернем компоненте, если вы используете EventCallBack<T> вместо Action<T> и ваше свойство param1 в вашем дочернем компоненте связано со свойством в вашем блоке @code родительского компонента, Blazor Движок намного лучше отследит, что и как обновить sh и когда это сделать.

Answer 4

Я полагаю, что обратный вызов @onClick заставляет ребёнка сделать рендеринг из-за некоторых скрытых логик c. Ваш обратный вызов или событие при назначении кнопке @onClick, скорее всего, добавляется в список того, что onClick выполняет внутри. Возьмите это с крошкой соли, это всего лишь моя теория.

Редактировать: ваши параметры сбрасываются из-за setState (), заставляющего вашего родителя выполнять рендеринг с нуля с жестко заданным кодом "1 "и" 2 ". Когда событие срабатывает для нажатой кнопки, я полагаю, что оно устанавливает внутреннее состояние компонентов, сохраняя данные. Больше соли.