Javascript ve React'te Değişmezlik

React, dinamik kullanıcı arayüzleri oluşturmak için ünlü bir kütüphanedir. Veri değişmezliği, işlevsel programlamadan gelen bir fikirdir ve ön uç uygulamanızın tasarımına başvurmanın birçok faydası olabilir.

Veri mutasyonu nedir?
Veri mutasyonu fikrini anlamak için programlamanın temellerine geri dönmemiz ve javascript'teki veri yapılarını nasıl karşılaştırabileceğimizi anlamamız gerekecek . İlkel türleri karşılaştırmak oldukça kolaydır.

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

Kısacası, İlkel olmayan durum için ==ve ===operatörün değişkenleri orada referans alarak karşılaştırın. bunları değerlere göre de karşılaştırabiliriz, ancak karmaşık veri yapısında bu, derin eşitlik kontrolleri olarak adlandırılan çoklu eşitlik kontrollerine ihtiyaç duyacaktır .

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()Dizi değerlerini değişmez bir şekilde değiştirmek için kullanabilirsiniz .

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

Durumunuz karmaşıksa (iç içe nesne içeriyorsa) durumunuzun değişip değişmediğini kontrol etmek zordur. Derin eşitlik kontrolü yapmanız gerekir, çünkü nesneler referans eşitliği kullanılarak karşılaştırıldığında, bir sonraki durumun değişip değişmediğinden emin olamazsınız ve derin eşitlik kontrolü, yeniden oluşturma süresine kıyasla daha fazla zaman alacaktır. Bu nedenle React, durum değişikliği karşılaştırması yerine her setState çağrısında bileşeni yeniden oluşturmayı tercih eder.

Durumunuzu minimumda tutmak, React'teki en iyi uygulamadır.

Teşekkürler! Umarım bu yazı işinize yarar :)