為什麼不可變性在 React 中那麼重要？

根據官網文檔來解釋，為什麼不可變性的概念在 React 中非常重要的原因，一般來說，有兩種改變資料的方式。第一種方式是直接修改變數的值，第二種方式是使用新的一份資料替換舊資料

React 文檔

一般來說，有兩種改變資料的方式。第一種方式是直接修改變數的值，第二種方式是使用新的一份資料替換舊資料

直接修改資料#

var player = {score: 1, name: 'Jeff'};
player.score = 2;
// player 修改後的值為 {score: 2, name: 'Jeff'}

新資料替換舊資料#

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// player 的值沒有改變, 但是 newPlayer 的值是 {score: 2, name: 'Jeff'}

// 使用物件展開語法，就可以寫成：
// var newPlayer = {...player, score: 2};

不直接修改（或改變底層資料）這種方式和前一種方式的結果是一樣的，這種方式有以下幾點好處:

簡化複雜的功能#

不可變性使得複雜的特性更容易實現。在後面的章節裡，我們會實現一種叫做 “時間旅行” 的功能。“時間旅行” 可以使我們回顧井字棋的歷史步驟，並且可以 “跳回” 之前的步驟。這個功能並不是只有遊戲才會用到 —— 撤銷和恢復功能在開發中是一個很常見的需求。不直接在資料上修改可以讓我們追溯並複用遊戲的歷史記錄

跟蹤資料的改變#

如果直接修改資料，那麼就很難跟蹤到資料的改變。跟蹤資料的改變需要可變物件可以與改變之前的版本進行對比，這樣整個物件樹都需要被遍歷一次

確定在 React 中何時重新渲染#

不可變性最主要的優勢在於它可以幫助我們在 React 中創建 pure components。我們可以很輕鬆的確定不可變資料是否發生了改變，從而確定何時對組件進行重新渲染