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

In short, For Non-primitive case == and === operator’s compare variables by there reference. we can compare them by values as well, but in complex data structure this will need multiple equality checks which is called as deep equality checks.

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(): You can use [].concat() for changing array values in immutable way.

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

It’s hard to check whether your state has changed or not, if your state is complicated (contains nested object). You need to make deep equality check, because when objects are compared using reference equality, you can’t be sure whether next state is changed, and deep equality check will take more time as compare to re-render time. So React prefers to re-render component on every setState call instead of state change comparison.

Reactでは、状態を最小限に抑えることがベストプラクティスです。

ありがとう！この記事がお役に立てば幸いです:)