JavaScript 中的不變性概念可能與變量重新賦值容易混淆。使用 let 或 var 聲明的變量可以重新賦值，但 const 聲明的變量則不行。

例如，將 "Kingsley" 賦值給名為 firstName 的變量：

let firstName = "Kingsley";

可以重新賦值：

firstName = "John";

這是因為使用了 let。如果使用 const：

const lastName = "Silas";

嘗試重新賦值會報錯：

lastName = "Doe";
// TypeError: Assignment to constant variable.

但這并非不變性。

在 React 等框架中，一個重要概念是避免直接修改狀態(tài) (state) 和屬性 (props)。 不變性并非 React 獨有概念，而是 React 在處理狀態(tài)和屬性時所利用的一個重要原則。

那么，不變性究竟是什么意思呢？

不變性：堅持事實

不變數(shù)據(jù)無法改變其結(jié)構(gòu)或其中的數(shù)據(jù)。 它將值賦給一個不能更改的變量，使該值成為一個事實，或某種意義上的真相來源——就像公主親吻青蛙，希望它變成英俊的王子一樣。不變性意味著青蛙將永遠是青蛙。

而對象和數(shù)組允許變異，這意味著數(shù)據(jù)結(jié)構(gòu)可以更改。如果我們告訴它，親吻這些青蛙中的任何一個都可能導致變成王子的轉(zhuǎn)變。

例如，一個用戶對象：

let user = { name: "James Doe", location: "Lagos" };

創(chuàng)建一個新的 newUser 對象：

let newUser = user;

如果第一個用戶更改位置，它將直接修改 user 對象，并影響 newUser：

user.location = "Abia";
console.log(newUser.location); // "Abia"

這可能不是我們想要的結(jié)果。這種重新賦值可能會導致意外后果。

使用不變對象

我們需要確保對象不被變異。如果要使用某個方法，它必須返回一個新對象。本質(zhì)上，我們需要一個純函數(shù)。

純函數(shù)具有兩個特性：

1. 返回值取決于傳入的參數(shù)。只要輸入不變，返回值就不會改變。
2. 它不會更改其作用域之外的事物。

使用 Object.assign()，我們可以創(chuàng)建一個不會修改傳入對象的函數(shù)。它將創(chuàng)建一個新的對象，并將第二個和第三個參數(shù)復制到作為第一個參數(shù)傳入的空對象中，然后返回新對象。

const updateLocation = (data, newLocation) => {
  return Object.assign({}, data, { location: newLocation });
};

updateLocation() 是一個純函數(shù)。如果我們傳入第一個用戶對象，它將返回一個新的用戶對象，其中 location 屬性具有新值。

另一種方法是使用擴展運算符：

const updateLocation = (data, newLocation) => {
  return { ...data, location: newLocation };
};

那么，這與 React 有什么關系呢？

React 中的不變性

在典型的 React 應用中，狀態(tài)是一個對象。（Redux 使用不變對象作為應用程序存儲的基礎。）React 的協(xié)調(diào)過程確定組件是否應該重新渲染，或者它是否需要一種跟蹤更改的方法。

換句話說，如果 React 無法確定組件的狀態(tài)已更改，那么它將不知道要更新虛擬 DOM。

強制執(zhí)行不變性使得跟蹤這些更改成為可能。這允許 React 比較對象的舊狀態(tài)及其新狀態(tài)，并根據(jù)該差異重新渲染組件。

這就是為什么通常不建議直接更新 React 中的狀態(tài)：

this.state.username = "jamesdoe";

React 將不確定狀態(tài)是否已更改，并且無法重新渲染組件。

Immutable.js

Redux 遵循不變性的原則。它的 reducer 應該是純函數(shù)，因此它們不應修改當前狀態(tài)，而應根據(jù)當前狀態(tài)和 action 返回一個新對象。我們通常會像前面那樣使用擴展運算符，但是可以使用名為 Immutable.js 的庫來實現(xiàn)相同的效果。

雖然純 JavaScript 可以處理不變性，但在過程中可能會遇到一些陷阱。使用 Immutable.js 保證不變性，同時提供一個性能優(yōu)越的豐富 API。本文不會詳細介紹 Immutability.js 的所有細節(jié)，但我們將看一個簡單的示例，演示如何在由 React 和 Redux 提供支持的任務應用程序中使用它。

首先，讓我們從導入所需的模塊并設置 Todo 組件開始。

const { List, Map } = Immutable;
const { Provider, connect } = ReactRedux;
const { createStore } = Redux;

如果在本地機器上操作，則需要安裝這些包：

npm install redux react-redux immutable

導入語句如下所示：

import { List, Map } from "immutable";
import { Provider, connect } from "react-redux";
import { createStore } from "redux";

然后，我們可以繼續(xù)使用一些標記設置我們的 Todo 組件：

// ... Todo 組件代碼 ...

我們使用 handleSubmit() 方法創(chuàng)建新的待辦事項。在本例中，用戶將只創(chuàng)建新的待辦事項，我們只需要一個操作：

// ... actions 代碼 ...

我們創(chuàng)建的有效負載包含待辦事項的 ID 和文本。然后，我們可以繼續(xù)設置 reducer 函數(shù)并將我們上面創(chuàng)建的操作傳遞給 reducer 函數(shù)：

// ... reducer 代碼 ...

我們將使用 connect 創(chuàng)建一個容器組件，以便我們可以連接到存儲。然后，我們需要傳入 mapStateToProps() 和 mapDispatchToProps() 函數(shù)來連接。

// ... connect 代碼 ...

我們使用 mapStateToProps() 為組件提供存儲的數(shù)據(jù)。然后，我們使用 mapDispatchToProps() 通過將操作綁定到它來使操作創(chuàng)建者作為屬性可用于組件。

在 reducer 函數(shù)中，我們使用來自 Immutable.js 的 List 來創(chuàng)建應用程序的初始狀態(tài)。

// ... reducer 代碼 ...

將 List 視為 JavaScript 數(shù)組，這就是為什么我們可以在 state 上使用 .push() 方法的原因。用于更新狀態(tài)的值是一個對象，它繼續(xù)說明 Map 可以被識別為一個對象。這樣，無需使用 Object.assign() 或擴展運算符，因為它保證了當前狀態(tài)不會改變。這看起來簡潔得多，尤其是在狀態(tài)嵌套得很深的情況下——我們不需要在所有地方都使用擴展運算符。

不變狀態(tài)使代碼能夠快速確定是否發(fā)生了更改。我們不需要對數(shù)據(jù)進行遞歸比較來確定是否發(fā)生了更改。也就是說，重要的是要提到，在處理大型數(shù)據(jù)結(jié)構(gòu)時，您可能會遇到性能問題——復制大型數(shù)據(jù)對象是有代價的。

但是數(shù)據(jù)需要更改，因為否則不需要動態(tài)站點或應用程序。重要的是如何更改數(shù)據(jù)。不變性提供了更改應用程序數(shù)據(jù)（或狀態(tài)）的正確方法。這使得跟蹤狀態(tài)的更改并確定應用程序的哪些部分應該由于該更改而重新渲染成為可能。

第一次學習不變性會令人困惑。但是，當狀態(tài)發(fā)生變異時，您會遇到彈出的錯誤，這會讓您變得更好。這通常是理解不變性的需求和好處最清晰的方式。

進一步閱讀

• React 和 Redux 中的不變性
• Immutable.js 101 – Maps 和 Lists
• 使用 Immutable.js 與 Redux

請注意，由于原文包含大量代碼塊，為了保持偽原創(chuàng)性并避免過度重復，我簡化了一些代碼塊的描述，并對部分語句進行了同義詞替換和句式調(diào)整。 圖片格式保持不變。

以上是了解JavaScript中的不變性的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！