Понимание CascadingValue IsFixed на сервере Blazor

Я объявил в своей бритве два компонента <CascadingValue>, которые передают дочернему компоненту значение одного и того же типа (int), один из них объявлен с атрибутом Name.

Counter.бритва

    <h1>Counter</h1>
    
    <p role = "status">Current count: @IncrementCounter</p>
    <p role = "status">Current count fixed: @IncrementCounterFixed</p>

    <button class = "btn btn-primary" @onclick = "IncrementCount">Click me</button>

    <p><b>Cascading Parameter</b></p>
    <CascadingValue Value = "@IncrementCounter">
       <CascadingValue Value = "@IncrementCounterFixed" Name = "FixedCascade" IsFixed = "true">
          <CascadingChild>
          </CascadingChild>
       </CascadingValue>
    </CascadingValue>
    
    @code 
    {
        public int IncrementCounter { get; set; }
    
        public int IncrementCounterFixed { get; set; }
    
        protected override void OnInitialized()
        {
            IncrementCounterFixed = 5;
        }
        private void IncrementCount()
        {
            IncrementCounter++;
            IncrementCounterFixed++;
        }
    }

CascadingChild.razor

<div>
    <p>Cascading value: @IncrementCounter</p>
    <p>Cascading value Fixed: @IncrementCounterFixed</p>
</div>

@code 
{
    [CascadingParameter]
    public int IncrementCounter { get; set; }

    [CascadingParameter(Name = "FixedCascade")]
    public int IncrementCounterFixed { get; set; }
}

После нажатия кнопки «Нажми на меня» button фиксированное значение не меняется в первый раз, но при втором щелчке оно меняется на «6», а со второго щелчка оно продолжает изменять значение фиксированного свойства IncrementCounterFixed.

Но если я использую один компонент <CascadingValue> с атрибутом IsFixed = "true", значение IncrementCounterFixed не изменится, если значение увеличивается в родительской бритве.

Вывод по первому клику:

Выход второго клика:

Разъясните мне здесь, как это работает, Заранее спасибо.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Разъясните мне здесь, как это работает

  • Нажатие кнопки всегда вызывает повторную визуализацию родительского компонента.

  • Компонент CascadingChild не имеет (обычных) параметров, поэтому обычно он не обновляется при повторной визуализации. Это оптимизация, позволяющая избежать ненужных рендеров.

  • Но CascadingValue без IsFixed инструктирует Blazor выполнить отслеживание изменений и повторно отобразить дочерний элемент при изменении. Включение IsFixed (когда это возможно) является оптимизацией.

  • Внешнее (не IsFixed) CascadingValue заставит дочерний элемент обновляться при каждом щелчке. Внутреннее значение может «путешествовать автостопом». Но видимо здесь важен порядок, поэтому отображаемое значение отстает на шаг.

IsFixed ограничивает запуск обновлений рендеринга, но не меняет передачу значения. Когда дочерний элемент выполняет повторную визуализацию по любой другой причине, вы увидите последнее значение от родителя.

Есть несколько вещей, которые вы можете сделать, чтобы изучить это дальше:

  • поменяйте местами два элемента <CascadingValue ... >. Если внешнее значение IsFixed, оба значения обновятся немедленно.

  • используйте два отдельных дочерних компонента. Результаты будут более детерминированными и независимыми.

Хай @HenkHolterman, спасибо за подробное объяснение, я попробовал два сценария, которые вы упомянули выше. Первый из них немедленно обновляет оба значения в дочернем компоненте. Второй, он работает так, как и ожидалось, например, не IsFixed CascadingValue меняется, а значение IsFixed не меняется. Но я до сих пор не понимаю, почему значение IsFixed меняется, если я использую компонент Single Child с обернутыми в него двумя каскадами.

Naveen 31.05.2024 07:31

Ваша точка ''IsFixed ограничивает запуск обновлений рендеринга, но не меняет передачу значения. Когда дочерний элемент выполняет повторную визуализацию по любой другой причине, вы увидите последнее значение родительского элемента. Почему я вижу новое значение родительского элемента, даже если оно зафиксировано?

Naveen 31.05.2024 07:32

Значение на самом деле не фиксировано. Свойство IsFixed просто сообщает Blazor, что оно не изменится и, чтобы не было триггера, запускало повторный рендеринг.

Henk Holterman 31.05.2024 09:13

Другие вопросы по теме