Неизменяемость в Javascript и React

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

Что такое мутация данных?
Чтобы понять идею мутации данных, нужно будет вернуться к основам программирования и понять, как мы можем сравнивать структуры данных в javascript. Сравнивать примитивные типы довольно просто.

let num1 = 10,
    num2 = 10;
num1 === num2; // true

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = { name: "Pragati", lname: "Garud" };
obj1 === obj2; // false

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = obj1;
obj1 === obj2; // true

obj1.name = "unknown";
console.log(obj1.name); // unknown
console.log(obj2.name); // unknown

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

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = { name: "Pragati", lname: "Garud" };
valueCompare(obj1, obj2); //true

// Input: obj1 and obj2
// Output: true if obj1 is equal to obj2 in terms of values
function valueCompare(obj1, obj2) {
   const keys1 = list of keys of obj1;
   const keys2 = list of keys of obj2;
   if (keys1.lenth !== keys2.length) return false;
   for each key in keys1: 
      if (key is not present in keys2) 
         return false;
      if (typeOf(keys1[key] != typeOf(keys2[key]))
         return false;
      if (keys1[key] is a primitive && keys1[key] !== keys2[key])
         return false;
      if (obj1[key] is non primitive):
         isEqual = valueCompare(obj1[key], obj2[key]);
         if(!isEqual) return false;
}

let obj3 = Object.assign({}, obj1, { name: "unknown" });
obj3 === obj1; //false

2] [] .concat () : вы можете использовать [].concat()для неизменного изменения значений массива.

let numbers = [10, 20, 30];
numbers[1] = 22; // This will not change reference to an array
// Instead what you can do copy list and perform update as below
let numbers = [10, 20, 30];
let changedNumbers = [].concat(numbers);
changedNumbers[1] = 22;
changedNumbers === numbers; // false

Трудно проверить, изменилось ли ваше состояние или нет, если ваше состояние сложное (содержит вложенный объект). Вам необходимо выполнить глубокую проверку равенства, потому что, когда объекты сравниваются с использованием ссылочного равенства, вы не можете быть уверены, будет ли изменено следующее состояние, а глубокая проверка на равенство займет больше времени по сравнению с временем повторной визуализации. Поэтому React предпочитает повторно отображать компонент при каждом вызове setState вместо сравнения изменений состояния.

Сохранение минимального состояния - лучшая практика в React.

Спасибо! Надеюсь, эта статья будет вам полезна :)