Redux 是一种流行的状态管理库，广泛应用于 React 应用程序中。它是一种可靠、可扩展的架构模式，能够简化应用程序的状态管理。虽然 Redux 提供了许多有用的功能，但是随着应用程序规模的扩大，Redux 性能可能会受到影响。在本文中，我们将深入探讨 Redux 中的性能优化技巧，以帮助你避免潜在的性能问题。
避免无限制的 connect()
在 Redux 中，connect() 函数是用来连接 React 组件与 Redux store 的。虽然 connect() 提供了一个简单的方法来获取 store 中的数据并将其传递给组件，但是多次使用 connect() 可能会导致性能问题，因为每次使用 connect() 都会创建一个新的包装组件实例，这可能会产生大量的垃圾回收。
为了避免这个问题，我们可以使用 [react-redux 的 connectAdvanced() 函数，它提供了一个 memoize function 的位置。这个函数会缓存组件 props 和 store state 的联合结果，并确保只有在 props 或 state 实际上改变时才会更新组件。
-- -------------------- ---- -------
------ - --------------- - ---- --------------
---
------ ------- ----------------
---------- - -- -- -- -
----- ------------ - ------ -- ----------------------------- -----
------ - ------------ --
--
------- - -- -- -- -
----- ------- - ----------------- ----
------ - ------- --
-
----------------优化 mapStateToProps 函数
mapStateToProps 函数是一个负责将 store 中的 state 映射到组件 props 的函数。在 mapStateToProps 函数中，我们可以编写许多代码来计算派生状态、计算对象等。但是在 mapStateToProps 函数中进行大量的计算可能会影响应用程序的性能。
为了避免这个问题，我们应该尽可能减少 mapStateToProps 函数中的计算，尽可能缓存中间结果，可以使用 reselect 库来做到这一点。
reselect 是一个基于 memoization 的库，它可以帮助我们从 store 中选择和转换数据。通过使用 reselect，我们可以在 mapStateToProps 函数中缓存派生状态的计算结果。 这样，在相同的选择器参数下，我们将得到使用缓存的结果。
-- -------------------- ---- -------
------ - -------------- - ---- -----------
---
----- --------------- - ---------------
---------- ---------------------
------- ------- -- -
------ -------- -
---- ------
------ ------
---- ------------
------ -------------- -- -------------
---- ---------
------ -------------- -- --------------
--------
----- --- -------------- ------- - - --------
-
-
--
----- --------------- - ----- -- --
------ ----------------------
---
------ ------- -----------------------------------延迟计算
Redux store 中的 state 可以在任何时间点发生变化，但是有时我们会希望延迟计算，这样可以减少不必要的浪费。这可以通过使用 redux-batched-actions 库实现。
redux-batched-actions 是一个 middleware，它可以捕获多个相同类型的 action，然后将它们合并为一个 action 批次并一次性更新 store。这样，我们可以减少对 store 状态的多次更新，从而提高性能。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------------
---
----- ------- - ---- -- --
----- -----------
-------- -
--- -------------
----
-
---
----- ----------- - -- --
------------------------------- --------------------
-- ---- ---- -------
------------------------------避免不必要的 actions
在 Redux 应用程序中，我们通常会编写 action creator 函数来创建 action 对象。而这是的 action creator 返回的 action 对象会传递到 reducer 中去处理。
为了避免不必要的 actions，我们应该在编写 action creator 函数时尽可能缩小它们的粒度，并避免在同一时间多次触发。
例如，在 TodoList 应用程序中添加一个新的 Todo 时，我们可以将添加一个条目拆分为两个不同的事件：首先，点击“添加”按钮，然后输入内容并确认。这样我们就可以避免在每次输入时触发 action。
-- -------------------- ---- -------
----- ------- - ---- ----- -- --
----- -----------
-------- -
---
----
-
---
-- ---------- ------
--------------------------------- -------
--------------------------------- -------总结：
- 避免无限制的 connect()
- 优化 mapStateToProps 函数，使用 reselect
- 延迟计算，使用 redux-batched-actions
- 避免不必要的 actions
以上是关于 Redux 中的性能优化技巧的实践探讨。当我们的应用程序规模越来越大时，我们需要持续优化其性能，以确保它在每个用户设备上都运行出色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a89bb7d4982a6eb49c5ca