在前端开发中，状态管理是非常重要的一环。Redux 是一个优秀的状态管理库，但是要拥有更好的性能，我们需要做一些优化措施，防止不必要的渲染和数据重复读取。
1. 防止不必要的渲染
React 中，渲染是一个非常耗时的操作，因此我们需要尽量减少不必要的渲染。在 Redux 中，我们可以通过以下方法来防止不必要的渲染：
（1）使用 connect 的 shouldComponentUpdate
connect 是 React Redux 提供的用于连接 Redux store 与 React 组件的函数。通过 shouldComponentUpdate 方法，我们可以在组件更新前判断当前的 props 和 state 是否需要进行更新。
下面是一个示例代码：
------ - ------- - ---- --------------
------ ------ - ------------- - ---- --------
------ - --------- - ---- ------------------
----- ------- ------- ------------- -
------------- - -- -- -
-----------------------
-
-------- -
----- - ----- - - -----------
------ -
-----
------------------
------- -----------------------------------------------
------
--
-
-
----- --------------- - ------- -- -
------ -
------ ------------
--
--
----- ------------------ - -
----------
--
------ ------- ------------------------ -----------------------------（2）使用 React.memo
React.memo 是 React 16.6 新加入的一个特性，它可以帮助我们减少不必要的渲染。使用 React.memo 后，组件只有在 props 发生变化时才会重新渲染，否则会使用缓存的结果。
下面是一个示例代码：
------ ------ - ---- - ---- --------
----- ------- - ------------- -------------- -
------ -
------------------------
--
---
------ ------- --------2. 防止数据重复读取
在 Redux 中，我们可以通过以下方法来防止数据重复读取：
（1）使用 reselect
reselect 是一个用于创建可记忆的、高效的 selectors 的库。它可以帮助我们避免重复计算，提高性能。
下面是一个示例代码：
------ - -------------- - ---- -----------
----- -------- - ------- -- ------------
------ ----- -------------- - ---------------
-----------
------- -- -
------------------------------
------ ----- - --
-
--（2）使用 mapStateToProps 的参数 ownProps
mapStateToProps 方法通常只接收一个参数 state，但是我们也可以接收一个参数 ownProps，它代表组件的 props。通过 ownProps，我们可以根据组件的 props 进行相应的计算，从而避免不必要的数据读取。
下面是一个示例代码：
----- --------------- - ------- --------- -- -
----- -- - ------------
----- ---- - --------------------- -- ------- --- ----
------ -
-----
--
-结论
Redux 的性能优化可以从防止不必要的渲染和数据重复读取两个方面来入手。通过 shouldComponentUpdate、React.memo、reselect 和 mapStateToProps 的参数 ownProps，我们可以实现更高效的状态管理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671f5e642e7021665efd4051