Início / coding / Perguntas / 77675023
Accepted
David Thielen
Asked: 2023-12-17 23:45:14 +0800 CST

Como o Blazor sabe quando procurar uma alteração de parâmetro

  • 772

Digamos que eu tenha as duas caixas de combinação a seguir (todas pseudocódigo):

<ComboBox Data="@AllLastNames" @bind-Value="@LastName"/>
<ComboBox Data="@AllFirstNames" @bind-Value="@FirstName"/>

E o código por trás é:

private string LastName { get; set; }
private string FirstName { get; set; }

private List<string> AllLastNames => _allLastNames;
private List<string> AllFirstNames => _firstNameDictionary[LastName];

Ok, tudo o que foi dito acima funcionará muito bem se o Blazor, nos momentos apropriados, obtiver AllFirstNames, ver que ele mudou por meio de uma comparação de igualdade de referência e chamar SetParameteraAsync()com o novo valor.

Então, quando/por que e como o Blazor decide verificar essas Data=propriedades para ver se elas foram alteradas?

Este é um caso em que, dentro do LastNamesetter, devo ligar StateHasChanged()?

blazor

4 respostas

  1. Como e por que o Blazor decide atualizar o estado pode ser considerado uma mágica ou uma caixa preta ( mais sobre estados ).

    Mas se você estiver interessado em saber em que casos funciona, posso dar os seguintes exemplos.

    O estado é atualizado automaticamente :

    • Nos manipuladores de eventos Blazor (@onclick, @bind- etc.)
    • Em eventos do ciclo de vida do componente ( OnInitialized, OnParametersSet, ShouldRender, OnAfterRender, etc.)
    • Na atualização da marcação do Razor

    Você precisa atualizar o estado manualmente :

    • Operações Assíncronas (recebimento de dados de API, banco de dados, arquivo, etc.)
    • Eventos não Blazor
    • Interoperabilidade com JavaScript

    No seu caso @bind-Value="@LastName"funciona como uma trigger para atualizar automaticamente o estado, por exemplo quando o usuário seleciona um item no ComboBox AllLastNames, toda a cadeia é atualizada, ou seja LastName, AllFirstNamese ComboBox AllFirstNamessem chamar StateHasChangedo .

    Notas: Esta é minha preferência pessoal, mas pela minha experiência, usar um dicionário sem verificar a existência pode levar a um erro e muitas vezes é difícil encontrar a fonte.

    Eu sugeriria verificar a existência (mesmo se você tiver certeza de que ela existe):

    private List<string> AllFirstNames => _firstNameDictionary.TryGetValue(LastName, out var firstNames) ? firstNames : new List<string>();
    • 1

  2. Não há magia negra envolvida.

    Quando a renderização instancia um componente, ela cria e mantém uma lista das propriedades mapeadas para esse componente. Ele gera o ParameterViewobjeto desta lista quando chama SetParametersAsync.

    Quando o Renderizador renderiza um componente, ele verifica se o estado foi alterado em algum parâmetro do subcomponente. Se sim, ele chama SetParametersAsynco subcomponente.

    Nota que afirmo: "Chama SetParametersAsync", não "renderiza o componente". Se o componente for um ComponentBasecomponente, então será. Existem outros componentes da biblioteca de componentes de terceiros que podem substituir SetParametersAsynce implementar lógicas diferentes que não acionam um arquivo StateHasChanged.

    O algoritmo aplicado a cada valor para detectar uma alteração é o seguinte:

    public static bool MayHaveChanged<T1, T2>(T1 oldValue, T2 newValue)
{
    var oldIsNotNull = oldValue != null;
    var newIsNotNull = newValue != null;

    // Only one is null so different
    if (oldIsNotNull != newIsNotNull)
        return true;

    var oldValueType = oldValue!.GetType();
    var newValueType = newValue!.GetType();

    // HERE
    if (oldValueType != newValueType)
        return true;

    if (!IsKnownImmutableType(oldValueType))
        return true;

    return !oldValue.Equals(newValue);
}

private static bool IsKnownImmutableType(Type type)
    => type.IsPrimitive
        || type == typeof(string)
        || type == typeof(DateTime)
        || type == typeof(Type)
        || type == typeof(decimal)
        || type == typeof(Guid);

    Basicamente, ele pode detectar alterações em primitivos e em alguns objetos de valor. Para todo o resto MayHaveChangedretorna true[não se arrisca]. Observe que callbacks e RenderFragments são objetos de referência, então return true.

    No seu caso List<string> AllLastNamesé um tipo de referência, então falha no teste e MayHaveChangedretorna true. Portanto, se o componente pai for ComboBoxrenderizado, o renderizador SetParametersAsyncchamará ComboBox.

    • 1

  3. Adicione o manipulador de eventos, por exemplo, OnChange à sua caixa de combinação que atualizará a lista de referência com novos dados do banco de dados ou de alguma outra fonte que você esteja usando

    • 0
  4. Best Answer

    Então, quando/por que e como o Blazor decide verificar essas propriedades Data= para ver se elas foram alteradas?

    Toda vez que este componente é renderizado, e isso deve acontecer quando o LastName for alterado.

    Data="@AllFirstNames"é um 'parâmetro complexo' no Blazor, o que significa que sempre será tratado como alterado.

    • 0

relate perguntas