Tính bất biến trong Javascript & React

React là một thư viện nổi tiếng để xây dựng giao diện người dùng động. Tính bất biến của dữ liệu là một ý tưởng đến từ lập trình chức năng và việc áp dụng vào thiết kế ứng dụng giao diện người dùng của bạn có thể mang lại nhiều lợi ích.

Đột biến dữ liệu là gì?
Để hiểu ý tưởng về đột biến dữ liệu, bạn sẽ cần phải quay lại nền tảng của lập trình và hiểu cách chúng ta có thể so sánh cấu trúc dữ liệu trong javascript. So sánh các loại nguyên thủy khá dễ dàng.

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

Trong ngắn hạn, Đối với trường hợp không nguyên thủy ==và ===các biến so sánh của toán tử bằng tham chiếu đó. chúng ta cũng có thể so sánh chúng theo giá trị, nhưng trong cấu trúc dữ liệu phức tạp, điều này sẽ cần nhiều lần kiểm tra bình đẳng được gọi là kiểm tra bình đẳng sâu.

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 () : Bạn có thể sử dụng [].concat()để thay đổi giá trị mảng theo cách không thay đổi.

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

Thật khó để kiểm tra xem trạng thái của bạn đã thay đổi hay chưa, nếu trạng thái của bạn phức tạp (chứa đối tượng lồng nhau). Bạn cần thực hiện kiểm tra bình đẳng sâu, vì khi các đối tượng được so sánh bằng cách sử dụng bình đẳng tham chiếu, bạn không thể chắc chắn liệu trạng thái tiếp theo có bị thay đổi hay không và kiểm tra bình đẳng sâu sẽ mất nhiều thời gian hơn so với thời gian hiển thị lại. Vì vậy, React thích kết xuất lại thành phần trên mọi lệnh gọi setState thay vì so sánh thay đổi trạng thái.

Giữ trạng thái của bạn ở mức tối thiểu là cách tốt nhất trong React.

Cảm ơn! Tôi hy vọng bài viết này hữu ích cho bạn :)