《React 思維進化》 筆記系列
1. [React] DOM, Virtual DOM 與 React element
2. [React] 了解 JSX 與其語法、畫面渲染技巧
3. [React] 單向資料流介紹以及 component 初探
4. [React] 認識狀態管理機制 state 與畫面更新機制 reconciliation
5. [React] 在子 component 觸發父 component 資料更新、深入理解 batch update 與 updater function
6. [React] 了解 immutable state 與 immutable update 方法
7. [React] 認識 component 的生命週期、了解每次 render 都有自己版本的資料
8. [React] React 中的副作用處理、初探 useEffect
9. [React] 對 hooks 的 dependencies 誠實,以維護資料流的連動
10. [React] React 18 effect 函式執行兩次的原因及 useEffect 常見情境
11. [React] 認識 useCallback、useMemo,了解 hooks 運作原理
前言
承接上篇 [React] 在子 component 觸發父 component 資料更新、深入理解 batch update 與 updater function,此篇主要敘述的是《React 思維進化》 3–3 ~ 3–4 章節的筆記,若有錯誤歡迎大家回覆告訴我~
什麼是 immutable、什麼是 mutate
在 React 的 state 資料中,我們可儲存任何型別的資料,但如果是存放物件或陣列型別的資料,想要更新時,應該根據更新需求重新產生新的物件或陣列,為什麼呢~?接下來就先來看看什麼是 immutable、什麼是 mutate吧!
在 JavaScript 中,原始型別(primirive)的資料是 immutable (不可變的) 的,所謂 immutable 是指這些值本身不能被修改,若希望更新資料,只能「產生一個新值來取代舊的」。
補充:JavaScript 的原始型別
- 包含:String(字串)、Number(數字)、Boolean(布林值)、Undefined(未定義)、Null(空值)、Symbol(符號)、BigInt(大整數)
- 儲存的是「值」本身
- 原始型別的值在賦予給其他變數時,會複製值,而非複製參考
- 賦值給原始型別變數時,變數原有的值不會被修改,而是被新的值取代
舉例而言,當我們嘗試修改字串值內容時,字串不會有任何反應或改變:
如果我們想要更新字串資料,要重新產生新字串來取代舊字串,才能順利更新:
其中,str = 'Heact';
是對 str 這變數「重新賦值」,改的是 str
這變數要指向哪個字串,而非改變字串 'React'
這值本身的內容,示意圖如下:
同樣的,在 React 更新原始型別的 state 資料,一樣會產生並指定新值來取代舊值:
const [number, setNumber] = useState(0);
const [name, setName] = useState('React');
const [isActive, setIsActive] = useState(false);
setNumber(1); //產生一個全新的數字值 1,並傳給 setNumber 來取代舊的值 0,原本的值 0 本身沒有被修改
setName('Foo'); //產生一個全新的字串值 'Foo',並傳給 setName 來取代舊的值 'React',原本的值 'React' 本身沒有被修改
setIsActive(true); //產生一個全新的布林值 true,並傳給 setIsActive 來取代舊的值 true,原本的值 false 本身沒有被修改
物件與陣列
相對於上述的原始型別,在 JavaScript 中,物件與陣列是以「參考(reference)」形式存在的資料,物件或陣列本身的內容是可變(mutable)的,修改其屬性或項目內容的操作稱為「mutate」。
const position = {x: 0, y: 0};
const names = ['HTML', 'CSS', 'JavaScript'];
position.x = 10; //mutate position 的屬性
names[0] = 'React'; //mutate names 的項目
mutate 物件或陣列的屬性內容時,此變數的參考對象不會改變,只是內容被修改,示意圖如下:
如果要改變變數的參考、或避免改變舊有物件或陣列內容,應產生全新的物件或陣列來取代舊的。
(補充:關於 JavaScript 的傳值或傳址,可參考這篇:你不可不知的 JavaScript 二三事#Day26:程式界的哈姆雷特 — — Pass by value, or Pass by reference?)
保持 state 的 immutable
在 React,不該 mutate 一個物件或陣列型別的 state 資料,而是應該產生新物件或陣列來取代舊的,這種「資料一旦被建立後就不會再被事後修改」就稱為「immutable(不可變的)」。
保持 state 資料 immutable 是 React 的重要守則,在 JavaScript 中,物件與陣列都是 mutable 的,若要以 immutable 的方式操作物件或陣列,需要開發者自己建立安全手段來操作資料,自行維持 immutable state 的原則。
為何需要保持 state 的 immutable ?因為 React element 代表某個歷史時刻的畫面結構,一經建立後就不該被修改,而 state 作為原始資料同理,是用來表示 component 某個歷史時刻的資料,一旦被建立後就不該被修改,以維持單向資料流可靠性。
那如果不維持 state 的 immutable 會怎麼樣呢?接著來看看不維持 state 的 immutable 可能會產生的問題~
不維持 state 的 immutable 會怎麼樣? 👽 呼叫 setState
方法時的新舊資料檢查需求
如果我們有一個 state 以物件形式儲存文章的基本資料,期待在點擊按鈕後觸發文章資料的更新,並呼叫 re-render 來更新畫面。
以下是錯誤嘗試 1:以 mutaue 方式修改物件資料,在點擊按鈕後,不會觸發畫面更新:
import { useState } from "react";
export default function App() {
const [articleInfo, setArticleInfo] = useState({
title: "My titile",
descirption: "this is my article",
category: "React",
});
const handleClick = () => {
//⛔️ 以下是錯誤的 state 更新方式
articleInfo.title = "My NEW titile";
};
return (
<div>
<div>title: {articleInfo.title}</div>
<div>descirption: {articleInfo.descirption}</div>
<div>category: {articleInfo.category}</div>
<button onClick={handleClick}>clicke me</button>
</div>
);
}
讀者可能想說,這很正常呀,因為沒有呼叫 setArticleInfo
來觸發 re-render,畫面當然不會更新。
因此有了錯誤嘗試 2:加上 seArticleInfo
的呼叫,仍無法觸發畫面更新:
import { useState } from "react";
export default function App() {
const [articleInfo, setArticleInfo] = useState({
title: "My titile",
descirption: "this is my article",
category: "React",
});
const handleClick = () => {
//⛔️ 以下是錯誤的 state 更新方式
//因為 articleInfo 存的參考的值仍相同,透過 Object.is() 比較後發現相同,因此不會觸發 re-render
articleInfo.title = "My NEW titile";
setArticleInfo(articleInfo);
};
return (
<div>
<div>title: {articleInfo.title}</div>
<div>descirption: {articleInfo.descirption}</div>
<div>category: {articleInfo.category}</div>
<button onClick={handleClick}>clicke me</button>
</div>
);
}
為何不會更新?我們之前提過,reconciliation 過程中,當 setState
被呼叫後,React 會先以 Object.is()
來檢查新舊 state 值是否相同,若相同則判定資料沒更新,會直接中斷後續流程。而因為 articleInfo.title = “My NEW titile”;
是 mutate 既有物件, articleInfo
本身存的參考沒變,呼叫 setArticleInfo(articleInfo);
傳入的 articleInfo
還是舊的物件參考,因此 Object.is()
比較後會發現新舊值都指向同一個參考,判定相同、因而中斷後續流程。
那要如何讓畫面如預期更新?要在呼叫 setArticleInfo
時傳入新產生的物件:
import { useState } from "react";
export default function App() {
const [articleInfo, setArticleInfo] = useState({
title: "My titile",
descirption: "this is my article",
category: "React",
});
const handleClick = () => {
//✅ 建立新物件作為新 state 資料,沒有修改既有 articleInfo 物件
//newArticleInfo 會得到新的參考位址,和既有的 articleInfo 參考不同,因此會觸發 re-render
const newArticleInfo = {
title: "My NEW titile",
descirption: "this is my article",
category: "React",
};
setArticleInfo(newArticleInfo);
};
return (
<div>
<div>title: {articleInfo.title}</div>
<div>descirption: {articleInfo.descirption}</div>
<div>category: {articleInfo.category}</div>
<button onClick={handleClick}>clicke me</button>
</div>
);
}
當 setState
方法被呼叫後,React 會嘗試判定一個物件或陣列 state 是否改變,判定方式是看既有資料和新資料的「參考」是否相同,而不會檢查物件或陣列內的資料內容是否不同;因此即使傳給 setState
與原資料內容完全相同、但參考不同的物件或陣列,React 仍判定資料有更新,會繼續 re-render。
因此,不維持 state 的 immutable 會怎麼樣?會導致呼叫 setState
方法時,React 無法透過資料參考是否相同來判定新舊值是否相同,進而導致setState
方法無法如我們預期的觸發 re-render、導致資料與畫面不一致。
不維持 state 的 immutable 會怎麼樣? 👽 過去 render 的舊 state 仍有被讀取的需求
在應用程式的商業邏輯中,我們可能需要讀取過去 render 的舊 state 資料,如果 mutate 了舊 state,可能會丟失資料的歷史紀錄、進而導致後續的邏輯失效。
以一個非同步事件的程式碼為例:
import { useState } from 'react';
export default function App() {
const [player, setPlayer] = useState({
position: { x: 0, y: 0 }
});
const moveToRight = () => {
//⛔️ 以下是錯誤的 state 更新方式
player.position.x += 1;
setPlayer({ ...player });
};
const alertCurrentPosition = () => {
setTimeout(
() => {
alert(`x: ${player.position.x}, y: ${player.position.y}`)
},
3000
);
}
return (
<div>
x: {player.position.x}, y: {player.position.y}
<div>
<button onClick={moveToRight}>move to right</button>
<button onClick={alertCurrentPosition}>
alert current position after 3 secs
</button>
</div>
</div>
);
}
在這範例中有兩個按鈕,各自綁定了事件處理,我們預期在點擊 「move to right」按鈕後, x 值能增加 1,而 y 不變;也預期在點擊 「alert current position after 3 secs」按鈕後,3 秒後會 alert 顯示點擊此按鈕瞬間的 position 資訊。
舉例來說,當位置為 0, 0
時,我們預期點擊 alert 按鈕後,會固定跳出 x: 0, y: 0
的資訊,但如果我們在位置為 0, 0
時,點擊 alert 按鈕,接著快速的在三秒內點 “move to right” 移動位置,最後跳出的 alert 會是x: 3, y: 0
,而非預期結果x: 0, y: 0
。示意動畫如下:
0, 0
時,點擊 alert 按鈕,預期三秒後要顯示 x: 0, y: 0;但因為中間點了
“move to right” 移動位置,導致三秒後顯示出 x: 3, y: 0
為何會有這個非預期結果?因為我們在 player.position.x += 1;
這裡錯誤 mutate 既有物件內容,導致每次更新 state 時,也一併修改了過去 render 的舊版 state 資料,因此 alertCurrentPosition
事件取出的舊版本 position
資料已被修改過,導致最後出來的結果不如預期。
在非同步事件中,事件可能在 component 已 re-render 後才去讀舊 render 的 state,而因為我們用 mutate 的方式修改舊有資料,導致拿到的歷史資料已被修改,進而導致商業邏輯出錯。
除了非同步事件外,其他需要讀取舊 render 資料來進行後續邏輯處理的情境如:文章編輯的 undo / redo 功能、訂單狀態由 A 變為 B 後要進行特定處理…等,如果我們竄改了舊 state 資料,就會導致依賴這些資料的邏輯無法運作。
補充:非同步事件只是一種 mutate state 可能會有問題的情境,不是判斷要不要 immutable update 的依據,無論有沒有在非同步事件讀取 state,在所有情境都應該保持 state immutable。
因此,不維持 state 的 immutable 會怎麼樣?會導致需要讀取舊 render 資料來進行判斷或處理的商業邏輯出錯,導致應用程式的行為不如預期。
不維持 state 的 immutable 會怎麼樣?👽 React 效能優化機制的參考檢查需求
React 很多效能優化機制會以資料的參考是否相同作為判斷依據,機制如:
useEffect
useCallback
useMemo
React.memo
若直接修改既有物件或陣列 state 資料,這些機制可能不會意識到資料有變化(因為內容改變,但參考沒變),機制運作會產生異常。
因此,不維持 state 的 immutable 會怎麼樣?會導致 React 的效能優化機制運作異常,導致某些時刻應用出現非預期錯誤。
💡小結,以 React 開發時,開發者要謹記,要維持資料處於「只要參考沒變就代表內容沒變,只要參考有變就代表內容有變」 的狀態。
Immutable update
說了這麼多要以 immutable 的方式更新 state 資料,那實務上我們該用什麼方式來 immutable 更新物件或陣列資料呢?接下來要介紹如何以 immutable 的方式更新物件或陣列資料,immutable update 不限於 React 的 state 情境,所以我們先從純 JavaScript 來看~
物件資料的 immutable update 方法
以 spread 語法來複製物件的內容,並加上新屬性或更新既有屬性
以 immutable 方式新增或修改物件的屬性,可分為兩步驟:
- 建立一個全新物件,把既有物件的全部屬性複製到新物件中
- 在新物件加上新屬性,或覆蓋想修改的屬性的值
而我們可以用 JavaScript ES6 的 spread 語法來複製物件所有屬性到另一個物件,並在後面加上想要覆蓋或新增的屬性:
const oldObj = {a: 10, b: 20, c: 30};
const newObj = {...oldObj, a: 100, d: 400};
console.log(oldObj); //{a: 10, b: 20, c: 30}
console.log(newObj); //{a: 100, b: 20, c: 30, d: 400}
而如果遇到巢狀物件結構,則需要在有涉及屬性更新的每一層物件都做對應的 spread 屬性複製:
const oldObj = {
a: 1,
b: 2,
innerObj1: {c: 3, d: 4},
innerObj2: {e: 5}
};
const newObj = {
...oldObj,
innerObj1: {...oldObj.innerObj1, d: 100}
}
console.log(oldObj);
//{a: 1, b: 2, innerObj1: {c: 3, d: 4}, innerObj2: {e: 5}}
console.log(newObj);
//{a: 1, b: 2, innerObj1: {c: 3, d: 100}, innerObj2: {e: 5}}
console.log(Object.is(oldObj, newObj));//false
console.log(Object.is(oldObj.innerObj1, newObj.innerObj1)); //false
console.log(Object.is(oldObj.innerObj2, newObj.innerObj2)); //true
步驟分別為:
- 建立新物件
newObj
並複製oldObj
的所有屬性 - 因為想更新
oldObj
內的innerObj1
物件內的屬性d
,因此也需建立一個新的innerObj1
物件,並複製oldObj
的innerObj1
屬性,最後加上想覆蓋的屬性d
- 沒有要更新
innerObj2
的內容,因此不須另外產生新的物件參考,只需沿用既有的物件即可
此操作滿足了 immutable update 的要求:
- 既有資料所有層級的所有屬性值或參考都不能有任何改變
- 想更新既有資料中任何一層物件或陣列內容時,就要為了新資料產生對應的新參考
以解構賦值配合 rest 語法來剔除物件的特定屬性
用解構賦值搭配 rest 語法,能以 immuatble 方式剔除既有物件某一屬性:
const oldObj = { a: 1, b: 2, c: 3};
const {b, ...newObj} = oldObj; //取出 b屬性,而 newObj 是除了 b 屬性以外的其他屬性所組成的物件
console.log(oldObj); //{a: 1, b: 2, c: 3}
console.log(newObj); //{a: 1, c: 3}
將想剔除的屬性 b
用解構賦值的方式單獨提出,將剩下的屬性用 rest 語法 …
集中到新物件 newObj
中,也就是除了想剔除的屬性外,複製既有物件的其餘屬性到新物件中。
陣列資料的 immutable update 方法
以 spread 語法來插入陣列項目
- 在陣列的開頭插入新項目
const oldArr = ['A', 'B', 'C'];
const newArr = ['New Item', ...oldArr]; //先在新陣列放上要新增的項目,再用 spread 複製既有陣列的項目
console.log(oldArr); //['A', 'B', 'C']
console.log(newArr); //['New Item', 'A', 'B', 'C']
- 在陣列結尾插入新項目
const oldArr = ['A', 'B', 'C'];
const newArr = [...oldArr, 'New Item']; //先在新陣列放上 spread 複製的既有陣列項目,再接著放要新增的項目
console.log(oldArr); //['A', 'B', 'C']
console.log(newArr); //['A', 'B', 'C', 'New Item']
//想在 index 為 1 和 index 為 2 的項目中間插入新項目,代表目標插入位置是 index 2,
//會將原先在 index 為 2 的項目 'C' 往後擠到 index 3
const oldArr = ['A', 'B', 'C', 'D'];
const insertTargetIndex = 2;
const newArr = [
...oldArr.slice(0, insertTargetIndex), //slice 不會 mutate 原有陣列本身,而會回傳新陣列,這裡會回傳 ['A', 'B']
'New Item',
...oldArr.slice(insertTargetIndex), //這裡會回傳 ['C', 'D']
];
console.log(oldArr); //['A', 'B', 'C', 'D']
console.log(newArr); //['A', 'B', 'New Item', 'C', 'D']
操作步驟:
oldArr.slice(0, 2)
取得既有陣列 index2
(不包含 index2
)之前的所有項目,也就是['A', 'B']
,將這段 spread 到新陣列開頭- 擺上要新增的項目
'New Item'
- 再呼叫
oldArr.slice(2)
取得既有陣列從 index2
(包含 index2
)以後的所有項目,也就是['C', 'D']
,將這段 spread 到新陣列尾端
剔除陣列項目
以陣列的 filter
方法來剔除陣列中的特定項目,filter
通常用來過濾要保留的項目,轉換思路後,可想成是將不符合剔除條件的項目保留下來。
const oldArr = ['A', 'B', 'C', 'D'];
const removeTargetIndex = 2;
const newArr = oldArr.filter((item, index) => index !== removeTargetIndex);
console.log(oldArr);//['A', 'B', 'C', 'D']
console.log(newArr);//['A', 'B', 'D']
更新或取代陣列項目
以陣列的 map
方法來更新或取代陣列項目:
const oldArr = ['A', 'B', 'C', 'D'];
const newArr = oldArr.map((item, index) => (index == 2) ? 'NEW Item' : item);
//如果項目 index 符合目標條件就回傳新項目來取代,否則回傳原有項目
console.log(oldArr);//['A', 'B', 'C', 'D']
console.log(newArr);//['A', 'B', 'NEW Item', 'D']
也可用 map
作項目的進一步計算:
const oldArr = [550, 680, 250, 300];
const newArr = oldArr.map(number => number * 0.9);
console.log(oldArr);//[550, 680, 250, 300]
console.log(newArr);//[495, 612, 225, 270]
排列陣列項目
🚨 陣列內建的 sort
方法會 mutate 既有陣列,不能直接用 oldArr.sort()
來排序:
const oldArr = [5, 34, 22, 2];
//⛔️ mutate 到舊陣列
const newArr = oldArr.sort((a, b) => a - b);//直接以既有陣列進行由小到大排序,並回傳一個新陣列
console.log(oldArr);//[2, 5, 22, 34],既有陣列沒有保持 immutable,被 sort 方法 mutate 了
console.log(newArr);//[2, 5, 22, 34]
✅ 要以 immutable 的方式排序,先複製一份新陣列,針對新陣列 sort()
,才能保持原陣列的 immutable:
const oldArr = [5, 34, 22, 2];
const newArr = [...oldArr]; //用 spread 複製既有陣列的所有項目
newArr.sort((a, b) => a - b); // sort 新陣列項目
console.log(oldArr);//[5, 34, 22, 2],既有陣列維持原樣,沒有被 mutate
console.log(newArr);//[2, 5, 22, 34],新陣列被 sort() mutate 過
而反轉陣列順序的 reverse
方法也會 mutate 原陣列,一樣要先複製一份新陣列再 reverse 新陣列:
const oldArr = [5, 34, 22, 2];
const newArr = [...oldArr]; //用 spread 複製既有陣列的所有項目
newArr.reverse(); // reverse 新陣列項目
console.log(oldArr);//[5, 34, 22, 2],既有陣列維持原樣,沒有被 mutate
console.log(newArr);//[2, 22, 34, 5],新陣列被 reverse() mutate 過
巢狀式參考型別的複製誤解
immutable update 巢狀物件或陣列資料時,常會出現錯誤的操作。範例程式碼如下:
import { useState } from "react";
export default function App() {
const [cartItems, setCartItems] = useState([
{ productId: 'foo', quanity: 1 },
{ productId: 'bar', quanity: 8 },
{ productId: 'fizz', quanity: 3 },
])
const handleCarItemQuanityChange = (targetIndex, quanity) => {
//更新 cartItems state 陣列中位於 targetIndex 這個 index 的物件的 quanity 屬性
//我們預期在呼叫 handleCarItemQuanityChange 後,更新位於 targetIndex 這個 index 的物件的 quanity 屬性
}
此時多數人會以以下這種錯誤方式來更新 state,此方法仍會 mutate 原state 資料:
import { useState } from "react";
export default function App() {
const [cartItems, setCartItems] = useState([
{ productId: 'foo', quanity: 1 },
{ productId: 'bar', quanity: 8 },
{ productId: 'fizz', quanity: 3 },
])
const handleCarItemQuanityChange = (targetIndex, quanity) => {
//⛔️ 注意:以下是錯誤的、錯誤的、錯誤的 immutable update 方法!請不要讓它在你腦海停留
const newCartItems = [...cartItems];
newCartItems[targetIndex].quanity = quanity;
setCartItems(newCartItems)
}
巢狀式參考型別的 immutable update
這個操作哪裡有錯?雖然用 spread 複製出新陣列,但陣列中每個項目都是物件,而物件以參考形式存在,因此新陣列中每個物件項目都和舊陣列的物件項目是同一個參考,mutate 新陣列中的物件項目,也會同時 mutate 既有陣列中的物件。
我們可以用 Object.is()
來查看 cartItems[targetIndex]
和 newCartItems[targetIndex]
是否指向同一個參考:
const handleCarItemQuanityChange = (targetIndex, quanity) => {
//⛔️ 注意:以下是錯誤的、錯誤的、錯誤的 immutable update 方法!請不要讓它在你腦海停留
const newCartItems = [...cartItems];
console.log(Object.is(cartItems, newCartItems)); //false
console.log(Object.is(cartItems[targetIndex], newCartItems[targetIndex])); //true
newCartItems[targetIndex].quanity = quanity;
//newCartItems[targetIndex] 和 cartItems[targetIndex] 指向同一個物件參考,mutate newCartItems[targetIndex] 的 quanity 屬性就等同去 mutate cartItems[targetIndex] 的 quanity 屬性
setCartItems(newCartItems)
}
因為 newCartItems
是新陣列,在 setState
後以 Object.is()
檢查時,還是能被判定為不同參考而繼續 re-render,但實際上舊的 cartItems[targetIndex]
物件還是有被更改到,這也讓這個錯誤操作更難被察覺與除錯。
因此,在操作物件或陣列資料時,建議使用本來就是 immutable 的操作方法,如:map
、filter
、spread、rest。
以下是正確操作巢狀參考型別資料的方式,複製最外層,如果要更新內層的物件或陣列時,也都要複製並產生新的參考,而沒有要更新的則沿用即可:
const handleCarItemQuanityChange = (targetIndex, quanity) => {
const newCartItems = cartItems.map((cartItem, index) => (
//✅ 在 targetIndex 的位置產生新物件,複製既有物件的所有屬性,再覆蓋上 quanity 屬性的新值
(index === targetIndex) ? {...cartItem, quanity} : cartItem
));
console.log(Object.is(cartItems, newCartItems)); //false
console.log(Object.is(cartItems[targetIndex], newCartItems[targetIndex])); //false
setCartItems(newCartItems);
};
補充:sort
和 reverse
可以在複製陣列後呼叫而不擔心 mutate 的問題,是因為 sort
和 reverse
只會 mutate 陣列中項目的排列順序,不會 mutate 項目的內容,所以複製新陣列後再 sort
或 reverse
是安全的👌。
Spread 複製的是值還是參考?
用 spread 語法複製物件屬性時:
- 如果是複製原始型別的屬性,會複製出獨立的新值
- 如果是複製陣列或物件的屬性時,會複製記憶體中的位址(參考),而非複製完整內容
以以下範例來說:
const oldObj = {a: 10, b: 20, c: { foo: 8, bar: 9}};
const newObj = {...oldObj, d: 400};
console.log(newObj); //{a: 10, b: 20, c: { foo: 8, bar: 9}, d: 400}
console.log(Object.is(oldObj.c, newObj.c)); //true
複製屬性 a
和 b
時,因為 a
和 b
屬性是原始型別,所以是複製值本身,而屬性 c
是物件,所以是複製參考,因此 oldObj.c
和 newObj.c
會指向同一個參考,mutate newObj.c
的同時也會修改到 oldObj.c
。
若要改動 oldObj.c
,應該先複製一份 oldObj.c
,再覆蓋新的屬性值:
const newObj = {
...oldObj,
c: {...oldObj.c, foo: 800, buzz: 600},
d: 100
}
JavaScript 中,陣列或物件資料中每一層參考都是獨立的,spread 語法只會做單層的 shallow clone。
補充:shallow clone 和 deep clone 都是指複製物件或陣列的方式,但深度不同
- shallow clone (淺複製):只複製物件第一層屬性,如果屬性內容是原始型別則複製實際的值;如果屬性內容是物件型別則複製參考,複製的參考仍指向原物件。JavaScript 的 spread 語法是常用的 shallow clone 方式。
- deep clone (深複製):複製物件的所有層級,若遇到巢狀物件或陣列結構,會遍歷並複製每一層的每一個值。
Immutable update 不需要且不應使用 deep clone
immutable update 巢狀陣列或物件時,不需修改的部分只需沿用舊的參考,因為 immutable 重點不是整包資料完整複製或獨立,不需要做 deep clone,重點是「有內容更新需求時,就要建立全新的參考;而沒有更新需求的就可沿用參考」,只要讓既有資料能永遠對應特定歷史時刻的狀態即可。
補充:不推薦以 deep clone 來 immutable update React 的 state 資料,會導致以下缺點:
- 消耗多餘效能
- 造成不必要的複製,導致記憶體和效能的浪費
- 失去參考相等性,React 效能優化機制依賴於參考的相等性,deep clone 會導致沒更新的地方也產生新的參考,被 React 誤以為資料有更新,導致優化機制出錯