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

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

let firstName = "Kingsley";

可以重新賦值：

firstName = "John";

這是因?yàn)槭褂昧?let。如果使用 const：

const lastName = "Silas";

嘗試重新賦值會(huì)報(bào)錯(cuò)：

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

但這并非不變性。

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

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

不變性：堅(jiān)持事實(shí)

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

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

例如，一個(gè)用戶對(duì)象：

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

創(chuàng)建一個(gè)新的 newUser 對(duì)象：

let newUser = user;

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

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

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

使用不變對(duì)象

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

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

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

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

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

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

另一種方法是使用擴(kuò)展運(yùn)算符：

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

那么，這與 React 有什么關(guān)系呢？

React 中的不變性

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

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

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

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

this.state.username = "jamesdoe";

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

Immutable.js

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

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

首先，讓我們從導(dǎo)入所需的模塊并設(shè)置 Todo 組件開(kāi)始。

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

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

npm install redux react-redux immutable

導(dǎo)入語(yǔ)句如下所示：

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

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

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

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

// ... actions 代碼 ...

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

// ... reducer 代碼 ...

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

// ... connect 代碼 ...

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

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

// ... reducer 代碼 ...

將 List 視為 JavaScript 數(shù)組，這就是為什么我們可以在 state 上使用 .push() 方法的原因。用于更新?tīng)顟B(tài)的值是一個(gè)對(duì)象，它繼續(xù)說(shuō)明 Map 可以被識(shí)別為一個(gè)對(duì)象。這樣，無(wú)需使用 Object.assign() 或擴(kuò)展運(yùn)算符，因?yàn)樗ＷC了當(dāng)前狀態(tài)不會(huì)改變。這看起來(lái)簡(jiǎn)潔得多，尤其是在狀態(tài)嵌套得很深的情況下——我們不需要在所有地方都使用擴(kuò)展運(yùn)算符。

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

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

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

進(jìn)一步閱讀

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

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

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