為什麼不可變性在 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。我們可以很輕鬆的確定不可變數據是否發生了改變，從而確定何時對組件進行重新渲染