简介
Redux 是一个可预测的 JavaScript 状态容器，它提供了可预测的状态管理和可维护的、可测试的代码结构。但是，Redux 的数据不是不可变的，这就使得 Redux 对于大规模数据集合的处理效率不高。以及，当我们有数据需要派生出来时，Redux 的 mapStateToProps 会进行计算，而这种计算有可能十分消耗性能，特别是当数据集合非常大时。
在这种情况下，我们可以使用 Immutable.js 和 reselect 库来优化我们的 Redux 应用程序，提高效率。
Immutable.js
Immutable.js 是一个不可变数据结构的 JavaScript 库。在没有 Immutable.js 的情况下，我们需要通过编写许多冗长的代码来复制对象或数组，这会使我们的代码结构更加混乱而且更容易出错。使用 Immutable.js 可以简化这个过程，它可以提供更好的性能和可读性。
Immutable.js 中的数据结构是不可变的，这意味着任何修改都会从现有对象或数组创建一个副本，而不是修改原始对象或数组。Immutable.js 包括以下数据结构：
- List：类似于 JavaScript 数组
- Map：类似于 JavaScript 对象
- Set：类似于 JavaScript Set
- Stack：类似于 JavaScript 数组，但只支持 push、pop、peek 操作
- OrderedMap：类似于 JavaScript Map，保留迭代顺序
- OrderedSet：类似于 JavaScript Set，保留迭代顺序
- Record：帮助我们创建具有特定键的对象模板
下面是一个简单的示例，演示如何使用 Immutable.js，创建一个不可变的对象：
import { Map, List } from 'immutable';
const user = Map({ name: 'John', age: 28 });
const users = List([user]);
const newUser = user.set('age', 29);
const newUsers = users.push(newUser);在这个示例中，我们首先创建了一个名为 user 的不可变 Map 对象，它有两个属性：name 和 age。然后，我们创建了一个不可变的 List 对象，其中包含 user。接下来，我们使用 set() 方法创建了一个名为 newUser 的新 Map 对象，并为其 age 属性设置了 29。最后，我们使用 push() 方法，创建了一个名为 newUsers 的新 List 对象，其中包含 newUser。
reselect 库
reselect 是一个选择器库，它可以帮助我们在 Redux 应用程序中编写可组合的、高效的选择器函数。选择器在我们的 Redux 应用程序中非常有用，因为它们可以帮助我们有效地从 Redux Store 中获取派生状态。
当我们使用 reselect 库时，可以将派生状态的计算分解成两个部分：
- 创建选择器函数：创建一个选择器函数，该函数接受一个或多个 Redux Store 中的状态和其它参数，然后通过这些数据计算和返回一个派生状态。
- 使用选择器函数：将选择器函数作为 mapStateToProps 的参数传递给 React 组件，这样 React 组件就可以使用选择器函数来获取派生状态。
下面是一个简单的示例，演示如何使用 reselect 库：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
----- -------- - ----- -- ------------
----- --------- - ----- -- -------------
----- ------------- - ---------------
---------
----------
------- ------- -- -
------ ------
- ----------------- -- ------------------------- --- ---
- ------
--
--在这个示例中，我们首先创建了两个选择器函数：getUsers 和 getFilter。getUsers 是一个简单的选择器函数，它返回 Redux Store 中的 users 状态。getFilter 是另一个简单的选择器函数，它返回 Redux Store 中的 filter 状态。
然后，我们创建了一个名为 filteredUsers 的选择器函数。我们使用 createSelector() 方法来创建这个函数。createSelector() 方法接受一个或多个选择器函数和一个转换函数。在这个示例中，我们将 getUsers 和 getFilter 作为参数传递给 createSelector() 方法，并将一个转换函数作为最后一个参数传递。
转换函数接受 getUsers 和 getFilter 返回的两个值，并返回我们想要的派生状态，即 users 列表中包含过滤器字符串的用户，或者如果没有提供过滤器字符串，则返回完整的 users 列表。
最后，我们可以将 filteredUsers 选择器直接作为 mapStateToProps 的参数传递给 React 组件，这样组件就可以使用 filteredUsers 选择器来获取派生状态。
Immutable.js 和 reselect 库的结合使用
通过结合 Immutable.js 和 reselect 库的使用，我们可以更进一步地提升 Redux 应用程序的性能。
由于 Immutable.js 中的数据结构是不可变的，因此我们可以通过使用选择器和 Immutable.js 的数据结构来避免不必要的计算和引用。例如，我们可以只对我们需要的具体属性进行访问和更新，而不是访问和更新整个 Redux Store。
下面是一个示例，展示如何使用 Immutable.js 和 reselect 库的结合体，来计算一个包含特定用户的所有朋友的列表：
-- -------------------- ---- -------
------ - -------------- - ---- -----------
------ - ---- ---- - ---- ------------
----- -------- - ----- -- ------------
----- ----------------- - ----- -- ---------------------
----- ----------- - ------- --- -- --------------- -- -------------- --- ----
----- -------------- - ------- ----- --
----
---------------
------------- -- ------------------ ----------
-------------- -- --------
----- ---------------------- - ---------------
---------
------------------
------- --------------- -- -
----- ------------ - ------------------ ----------------
-- --------------- -
------ -------
-
------ --------------------- --------------
--
--在这个示例中，我们首先创建了两个选择器函数：getUsers 和 getSelectedUserId。getUsers 是一个简单的选择器函数，它返回 Redux Store 中的 users 状态。getSelectedUserId 是另一个简单的选择器函数，它返回 Redux Store 中的 selectedUserId 状态。
然后，我们创建了两个帮助函数：getUserById 和 getUserFriends。getUserById 接受一个 Immutable.js Map 对象列表和一个数字 id，然后返回一个包含特定 id 的用户的 Map 对象。getUserFriends 接受一个 Immutable.js Map 对象列表和一个 Map 对象，然后返回一个包含该用户所有朋友的列表。
最后，我们创建了一个名为 getSelectedUserFriends 的选择器函数。我们使用 createSelector() 方法来创建这个函数。createSelector() 方法接受 getUsers、getSelectedUserId 选择器函数和一个转换函数。在这个示例中，我们将 getUsers 和 getSelectedUserId 作为参数传递给 createSelector() 方法，并将一个转换函数作为最后一个参数传递。
转换函数接受 getUsers 和 getSelectedUserId 返回的两个值，并使用 getUserById 和 getUserFriends 创建一个包含特定用户的所有朋友的列表。如果用户不存在，则转换函数返回一个空 List 对象。
最后，我们可以将 getSelectedUserFriends 选择器直接作为 mapStateToProps 的参数传递给 React 组件，这样组件就可以使用 getSelectedUserFriends 选择器来获取派生状态。
总结
Immutable.js 和 reselect 库是两个强大的工具，可以帮助我们优化 Redux 应用程序的性能。Immutable.js 简化了数据结构的处理，使得我们可以更容易地使用不可变的数据并进行比较而不需要复制大量的数据。reselect 库帮助我们编写高效的选择器函数，使我们的应用程序运行更快并避免不必要的计算。在大型数据集合的情况下，结合使用这两个工具可以特别有效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465e5e2968c7c53b068f887