第 4 組讀書會 3-3 3-4

[tony140407]

日期：2025/04/15
導讀人：33
筆記工：Blue

簡報連結

---

回顧

• state 是前端應用程式中紀錄狀態的臨時、可更新資料，並會在更新資料後連動更新畫面
• 在 React 中呼叫 setState 方法並傳入新的物件後，React 會以 Object.is() 來檢查新舊 state 決定是否需要重新渲染畫面

---

3-3 維持 React 資料流可靠性的重要關鍵：immutable state

什麼是 mutate

原始型別

• 數字、字串、布林值、null、undefined、undefined、symbol
• 原始型別是不可變的，當我們對原始型別進行操作時，實際上是創建了一個新的值，而不是修改原有的值。

物件型別

• 陣列、物件
• 物件和陣列是以「參考」(reference)的形式存在的，物件或陣列本身的內容是可變的（mutable），這種修改屬性或內容的操作稱為「mutate」

保持 State 資料的 immutable

React 中不應該去 mutate 一個物件或陣列型別的資料

當需要顯示舊有 state 時

React 效能優化機制，常常會仰賴於資料是否相同來作為判斷依據
如果使用 mutate 方式錯誤的修改了內容，導致值改變了參考沒變，就不會觸發優化處理

Q&A

• Q: 在 JavaScript 的資料型別中，原始型別與物件型別的差異是什麼？
• A: 原始型別是不可變的，物件型別是可變的。原始型別包括數字、字串、布林值等，而物件型別包括陣列、物件等。只能透過產生新的值來改變原始型別的值，而物件型別則可以直接修改其內容。
• Q: 解釋什麼是 mutate 和 immutable。
• A: mutate 是指直接修改物件的內容，而 immutable 是指不直接修改物件的內容，而是創建一個新的物件來表示修改後的狀態。
• Q: 為什麼我們必須在 React 中保持 state 資料的 immutable？
• A: React 有許多效能優化的機制，這些機制依賴於資料的不可變性來判斷哪些部分需要更新。如果我們直接修改 state 資料，React 將無法正確地比較和更新 UI，導致效能下降和錯誤的行為。

---

3-4 Immutable update

物件資料的 immutable update

範例一

以 spread 語法複製物件內容，並增加新屬性或更新既有屬性

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, c: 300, d: 4 };

console.log(obj1); // { a: 1, b: 2, c: 3 }
console.log(obj2); // { a: 1, b: 2, c: 300, d: 4 }

範例二

巢狀結構一樣使用 spread 語法

const obj1 = { a: 1, b: 2, innerObj: { c: 3, d: 4 } };
const obj2 = { ...obj1 };

console.log(Object.is(obj1, obj2)); // false

obj2.innerObj.c = 5;
console.log("obj1", obj1); // { a: 1, b: 2, innerObj: { c: 5, d: 4 } }
console.log("obj2", obj2); // { a: 1, b: 2, innerObj: { c: 5, d: 4 } }

console.log(Object.is(obj1.innerObj, obj2.innerObj)); // true

範例三

要更新資料的那一層物件也要使用 spread 語法

const obj1 = { a: 1, b: 2, innerObj: { c: 3, d: 4 } };
const obj2 = { ...obj1, innerObj: { ...obj1.innerObj, e: 5 } };

console.log(Object.is(obj1, obj2)); // false

obj2.innerObj.c = 5;
console.log("obj1", obj1); // { a: 1, b: 2, innerObj: { c: 3, d: 4 } }
console.log("obj2", obj2); // { a: 1, b: 2, innerObj: { c: 5, d: 4, e: 5 } }

console.log(Object.is(obj1.innerObj, obj2.innerObj)); // false

範例四

想要一個跟 obj1 一樣的物件，但不想要 a 屬性

const obj1 = { a: 1, b: 2, c: 3, d: 4 };
const { a, ...obj2 } = obj1;

console.log(obj1); // { a: 1, b: 2, c: 3, d: 4 }
console.log(obj2); // { b: 2, c: 3, d: 4 }

陣列資料的 immutable update

範例一

在新陣列的開頭＆結尾插入新項目

const arr1 = [1, 2, 3];
// 建立內容與 arr1 相同的 arr2，並在開頭插入 "NEW"
const arr2 = ["New", ...arr1];

console.log(arr1); // [1, 2, 3]
console.log(arr2); // ["New", 1, 2, 3]

// 結尾
const arr3 = [...arr2, "New"];

console.log(arr3); // ["New", 1, 2, 3, "New"]

範例二

在陣列的中間插入新項目

const arr1 = ["A", "B", "C", "D"];

const index = 2; // 想在 B 跟 C 中間插入 "NEW"
const arr2 = [...arr1.slice(0, index), "NEW", ...arr1.slice(index)];

console.log(arr2); // ['A', 'B', 'NEW', 'C', 'D']

// 代表 NEW 之前是 arr1 的第 0~1 個元素
// NEW 之後是 arr1 的第 2 個元素及以後

範例三

創建包含 arr1 資料但不包括第二個元素的 arr2

const arr1 = ["A", "B", "C", "D"];

const removeTargetIndex = 2;
const arr2 = arr1.filter((item, index) => index !== removeTargetIndex);

console.log(arr2); // ['A', 'B', 'D']

範例四

創建包含 arr1 資料的 arr2，並將 arr2 中的第二個元素改名為 “second”

const arr1 = ["A", "B", "C", "D"];

const arr2 = arr1.map((item, index) => (index === 2 ? "second" : item));

console.log(arr2); // ['A', 'B', 'second', 'D']

範例五(錯誤範例)

利用 sort 排序陣列

const arr1 = [77, 2, 24, 5, 13];

const arr2 = arr1.sort((a, b) => a - b);
console.log(arr1); // [2, 5, 13, 24, 77]
console.log(arr2); // [2, 5, 13, 24, 77]

// 😢 arr1 被改變順序了，不符合 immutable
console.log(Object.is(arr1, arr2)); // true

範例六

必須先把 arr1 複製出來，再對新陣列進行 sort

const arr1 = [77, 2, 24, 5, 13];

const arr2 = [...arr1];
arr2.sort((a, b) => a - b);

console.log(arr1); // [77, 2, 24, 5, 13]
console.log(arr2); // [2, 5, 13, 24, 77]

範例七

reverse 也是一樣會 mutate 到既有資料，所以需要先進行複製

const arr1 = [1, 2, 3, 4, 5];

const arr2 = [...arr1];
arr2.reverse();

console.log(arr1); // [1, 2, 3, 4, 5]
console.log(arr2); // [5, 4, 3, 2, 1]

巢狀式參考型別的複製誤解

Spread 複製的是物件或陣列的值或參考？

• Spread 複製的是物件或陣列的參考，這意味著如果你對複製的物件或陣列進行修改，原始物件或陣列也會受到影響而非複製完整內容

const obj1 = { a: 1, b: 2, c: { foo: 8, bar: 9 } };
const obj2 = { ...obj1 };

console.log(Object.is(obj1.c, obj2.c)); // true

obj2.c.foo = 800;

console.log(obj1); // { a: 1, b: 2, c: { foo: 800, bar: 9 } }
console.log(obj2); // { a: 1, b: 2, c: { foo: 800, bar: 9 } }

const obj1 = { a: 1, b: 2, c: { foo: 8, bar: 9 } };
const obj2 = { ...obj1, c: { ...obj1.c } };

console.log(Object.is(obj1.c, obj2.c)); // false

obj2.c.foo = 800;

console.log(obj1); // { a: 1, b: 2, c: { foo: 8, bar: 9 } }
console.log(obj2); // { a: 1, b: 2, c: { foo: 800, bar: 9 } }

spread 語法只會做單層的 shallow clone(shallow copy)

淺拷貝 ＆ 深拷貝

• 淺拷貝(shallow copy)：只複製物件的第一層屬性，如果是原始型別，則會複製實際
  的「值」，對於嵌套的物件或陣列，則會複製「參考」。
• 深拷貝(deep copy)：會遞迴地複製所有層級的屬性，對於嵌套的物件或陣列，會創建新的實例，複製出來的資料會完全獨立於既有資料。

Q&A

• Q: Shallow clone 與 Deep clone 的區別是什麼？
• A: sallow clone ：僅複製物件的第一層屬性，若物件的屬性內容是原始型別，則會
  複製實際的「值」，若屬性內容是另一個物件或陣列，則會複製「參考」。
  deep clone：當遇到巢狀的物件或陣列時，會深層的將每一層級的每個值都複製
  出來，複製出來的資料會完全獨立於既有資料
• Q: JavaScript 中的 spread 語法的複製是 shallow clone 還是 deep clone？
• A: shallow clone。
• Q: 請問用 Object.is(obj1.c,obj2.c)來判斷兩者是否相同，答案為何？
  為什麼？

const obj1 = { a: 1, b: 2, c: { foo: 8, bar: 9 } };
const obj2 = { ...obj1 };

console.log(Object.is(obj1.c, obj2.c)); // ?

• A: true，因為是淺拷貝 obj1.c 和 obj2.c 都是指向同一個物件的參考，所以它們是相等的。
• Q: 那要怎麼做才能讓 Object.is(obj1.c,obj2.c)為 false ，
  即為不同參考？
• A: 可以使用展開運算子來複製物件的屬性，並且對巢狀的物件進行深拷貝。

const obj1 = { a: 1, b: 2, c: { foo: 8, bar: 9 } };
const obj2 = { ...obj1, c: { ...obj1.c } };
console.log(Object.is(obj1.c, obj2.c)); // false

---

聊天室的討論:

關於 nesting immutable 也可以使用 structuredClone API 來 deep copy 新的 object
https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

---

有沒有方法可以在執行程式前先檢查有沒有使用 immutable state?
eslint AST 解析
https://github.com/eslint-functional/eslint-plugin-functional/blob/main/docs/rules/immutable-data.md

---

什麼情境需要用到下面文章
https://dev.to/malapashish/mastering-react-re-renders-the-key-prop-hack-you-need-to-know-17hh

官網有寫到 key rerender 這件事就是了
https://react.dev/learn/managing-state#preserving-and-resetting-state

假設你的元件會依照某個東西，長出內部的狀態(譬如元件內依照 id 去 fetch user data )

<User id={id} />

這時候改成用 key
<User key={id} id={id} />

就能強制整個元件依照 id 的變化重新 mount 一次元件

---

有沒有推薦的軟體可以來測試手機上的網頁

https://developer.chrome.com/docs/devtools/remote-debugging

Vconsole