什么是 @justindfuller/immutable-functional-react？
@justindfuller/immutable-functional-react 是一个用于 React 应用的 npm 包。它提供了许多能够使 React 组件更加函数式，不变的函数。这些函数都是使用不可变数据结构进行处理的，在 React 组件中使用这些函数可以避免意外的副作用，从而让 React 组件更加可预测和易于测试。
安装 @justindfuller/immutable-functional-react
使用 npm 安装：
--- ------- -----------------------------------------
使用 @justindfuller/immutable-functional-react
在 React 组件中使用不可变数据结构
使用不可变数据结构可以避免一些难以发现的状态更新引起的副作用。@justindfuller/immutable-functional-react 提供了许多在 React 组件中使用不可变数据结构的方法，比如 immutableMap, immutableList, immutableSet 等。
------ ----- ---- --------
------ - ------------ - ---- --------------------------------------------
----- ----------- - -- -- -
----- --- - -------------- ----- ------ ---- -- ---
------ -
-----
-------- ---------------------
------- --------------------
------
--
--在上面的例子中，我们使用了不可变的 map 来存储组件的状态，get方法可以让我们获取不可变数据结构中的值。
使用 @justindfuller/immutable-functional-react 中的函数式函数
@justindfuller/immutable-functional-react 还提供了许多函数，用于让组件更加函数式。
pipe
pipe 函数接受任意数量的函数作为参数，它们将按照从左到右的顺序进行执行，并且将每个函数的结果作为下一个函数的输入。
比如：
------ ----- ---- --------
------ - ---- - ---- --------------------------------------------
----- ---- - --- -- - - --
----- --------- - --- -- - - --
----- --------- - --- -- - - --
----- ----------- - -- -- -
----- ------ - ---------- ---------- ---------------
------ -
-----
---------- ------------
------
--
--在上面的例子中，我们定义了三个函数 add2, multiply3, subtract5，然后通过 pipe 函数将它们组合起来进行操作。pipe 函数的返回值是一个新函数，我们可以将它用作组件的状态或者 props。
memoize
memoize 函数可以用来缓存函数的执行结果，避免对于同样的输入多次计算，提高性能。
比如：
------ ----- ---- --------
------ - ------- - ---- --------------------------------------------
----- ----------- - -- -- -
----- ----- - ---
----- ----------------- - --- -- -
---------------------- -------
------ - - --------------
-
----- ---------------- - ---------------------------
----- ------- - ------------------------
----- ------- - ------------------------
---------------------
---------------------
------ -
-----
----------- -------------
----------- -------------
------
--
--在上面的例子中，我们定义了一个比较昂贵的函数 expensiveFunction，并且用 memoize 函数得到了一个新的函数 memoizedFunction。然后我们分别用 value 作为输入调用了两次 memoizedFunction，因为 memoizedFunction 对于同样的输入只会执行一次并缓存结果，所以我们只看到了一次的 log，结果也是相同的。
示例代码
------ ----- ---- --------
------ - ------------- -------- ---- - ---- --------------------------------------------
----- ---- - --- -- - - --
----- --------- - --- -- - - --
----- --------- - --- -- - - --
----- ----------- - -- -- -
----- --- - -------------- ----- ------ ---- -- ---
----- ----- - ---
----- ----------------- - --- -- -
---------------------- -------
------ - - --------------
-
----- ---------------- - ---------------------------
----- ------- - ------------------------
----- ------- - ------------------------
---------------------
---------------------
----- ------ - ---------- ---------- ---------------
------ -
-----
-------- ---------------------
------- --------------------
---------- ------------
----------- -------------
----------- -------------
------
--
--上面的代码演示了如何在 React 组件中使用 @justindfuller/immutable-functional-react 中的函数和不可变数据结构。在组件的状态中使用不可变数据结构，避免了对于状态更新可能引起的副作用，使用 pipe 函数和 memoize 函数则可以让组件更加函数式，从而让它的行为更加可预测和易于测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600572c881e8991b448e8f43