Новости программирования

Почему состояние редукции неизменно?

Краткое описание по статье Почему состояние редукции неизменно?

Название: Почему состояние редукции неизменно? . Краткое описание: [ad_1] ⭐ Чтобы редукс работал правильно, состояние до . Дата публикации: 24.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

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

let newState = {
    ...oldState,
    field1: {
        ...oldState.field1,
        field2: "someNewValue"
    },
}

В приведенном выше коде мы изменяем oldStateх field2 значение, создав новое состояние и установив новое значение для field2. Значение и ссылка oldState остается такой же.

Прежде чем мы перейдем к тому, почему мы должны изменить состояние приведения таким образом, мы должны знать разницу между «значением» и «ссылкой».

Разница между значением и ссылкой

Значение переменной — это «семантическое» значение того, что содержит эта переменная. Например, в приведенном ниже примере кода семантика того, что хранится в var1 и var2 одинаковы, поэтому можно сказать, что их значения одинаковы. Тем не мение, var3значение отличается, поскольку «семантика» того, что он содержит, отличается.

let var1 = { name: "John", age: 20 }
let var2 = { name: "John", age: 20 }

let var3 = { name: "May", age: 30 }

Когда мы говорим о ссылке, мы имеем в виду (каламбур!) адрес памяти, где что-то хранится. Таким образом, в приведенном выше примере адрес памяти объекта, на который ссылается var1, отличается от адреса памяти объекта, на который ссылается var2. Другими словами, var1 указывает на другой адрес памяти, чем var2. Следовательно, их ссылки различны, хотя их значения одинаковы!

Единственный способ, которым две переменные могут иметь одну и ту же ссылку, — это когда они обе указывают на один и тот же адрес памяти. Итак, в приведенном ниже коде var4 и var5 имеют ту же ссылку:

let var4 = { name: "Jeremy", age: 50 }
let var5 = var4

Если мы сделаем var5.name = “Mary”, то значение var4.name также будет «Мария».
Исходя из этого понимания, мы можем сделать вывод:

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

Повторный рендеринг компонентов реакции

Возвращаясь к Redux и React, React захочет перерендерить компонент только в том случае, если значение реквизита или состояние изменилось. Чтобы узнать, изменилось ли их значение, мы должны провести «глубокое сравнение» — рекурсивно проверить все поля внутри состояния и реквизита, чтобы увидеть, изменилось ли какое-либо из них.

Большие приложения обычно имеют очень глубокую структуру состояний при использовании избыточности — несколько вложенных уровней (в количестве 100 или даже 1000). Выполнение здесь глубокого сравнения, возможно, несколько раз в секунду, замедлит работу пользовательского интерфейса. С другой стороны, если мы делаем «поверхностное сравнение» (где мы только проверяем, изменились ли значения полей первого уровня), это будет намного быстрее, но мы можем пропустить обновления, нарушив логику приложения. Пример того, как мы можем пропустить обновления при поверхностном сравнении, представлен ниже:

let oldState = {
    name: "John",
    age: 20,
    profession: {
        title: "Software Engineer",
       anization: "SuperTokens.io"
    }
}

let newState = oldState

newState.profession.title = "Senior Software Engineer"

// Shallow comparison. upto level one
if (newState !== oldState || oldState.name !== newState.name || oldState.age !== newState.age || oldState.profession !== newState.profession) {
    // Update UI
}

В приведенном выше операторе if пользовательский интерфейс не будет обновляться, хотя мы намеревались изменить состояние. Это связано с тем, что ссылка на newState.profession равно oldState.profession.

Также обратите внимание выше, что когда мы делаем oldState.profession !== newState.profession или newState !== oldState, мы на самом деле проверяем, совпадают ли их ссылки (а не значения) (все они объекты).

Оптимизация с помощью правила неизменности

Проблема повторного рендеринга могла бы быть решена, если бы мы могли каким-то образом выполнить неглубокую проверку ссылок, не пропуская обновления. Это даст нам необходимую производительность и не нарушит логику приложения.

Основываясь на том, что мы видели в предыдущих разделах, мы знаем, что «если ссылки на две переменные (в данном случае переменные состояния) разные, их значения могут быть, а могут и не совпадать». Что, если мы изменим это на «тогда и только тогда, когда ссылки на две переменные (переменные состояния в данном случае) разные, мы должны предположить, что их значения различны». Что происходит сейчас?

Если приведенное выше изменение применяется, то чтобы узнать, изменилось ли значение состояния, мы можем просто выполнить проверку ссылки, например oldState === newState (если это false, то ссылка изменилась). Если ссылка изменилась, мы можем предположить, что значения должны были измениться, и запустить рендеринг. Если нет, то не перерисовываем.

Чтобы обеспечить выполнение этого предположения, мы никогда не должны напрямую изменять поля внутри oldState. Вместо этого мы всегда должны создавать новую копию oldStatenewState), точно так же, как мы показали в начале этой статьи, и внесите изменения в newState. С newState является новым объектом, его ссылка всегда будет отличаться от ссылки oldState. Это известно как обеспечение неизменности состояния — именно то, что Redux заставляет делать своих пользователей!

Вывод

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

[ad_2]
Source: codementor.io/community/new

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»