在 React Redux 应用中，由于数据的单向流动，每一次修改 store 中的数据都会触发整个应用重新渲染。这样会导致渲染效率低下，尤其是在应用比较复杂、数据量较大的时候。本文将探讨如何解决这个问题。
性能优化
在 Redux 中性能优化有很多条路可以走：
- state 数据的优化——尽量减少不必要的数据，使用浅拷贝等方式减少对象的生成
- 组件的优化——尽量减少组件不必要的渲染，使用 PureComponenet 或者 shouldComponentUpdate 生命周期，避免不必要的 render。
- 异步方式的优化——使用异步方式来减少更新的次数。
优化实战
state 数据优化
针对 state 数据的优化，我们可以使用 immer 库来进行减少对象的生成。使用 immer，我们可以通过操作原对象，获取一个新的可变对象，这样可以减少不必要的内存分配。
-- -------------------- ---- -------
------ ------- ---- --------
----- ------------ - -
----- -
----- ----- -----
---- --
-
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ -------------- ----- -- -
--------------- - ---------------
---
---- -------------
------ -------------- ----- -- -
-------------- - ---------------
---
--------
------ ------
-
--组件优化
在组件优化中，我们可以使用 shouldComponentUpdate 来控制组件是否需要重新渲染。shouldComponentUpdate 接收两个参数，nextProps 和 nextState，我们可以在这里面初始化一个检查过程，来判断组件是否需要重新渲染。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------------------------------- ---------- -
-- -------------------
-- ---------------- --- --------------- -
------ -----
-
-- --------------- --- -------------- -
------ -----
-
------ ------
-
-------- -
------ -----------------------------------------------
-
-
----- --------------- - ----- -- --
----- -----------
---- ---------
---
------ ------- --------------------------------------异步方式优化
异步方式可以使用 Thunk 或者 Redux-saga 这样的中间件来实现。使用异步方式，可以将多个修改操作合成一个操作，从而减少触发渲染的次数。
-- -------------------- ---- -------
----- ----------- - --------------
----- ---------- - ---- -- --
----- ------------
-------- ----
---
-- -- ----- ------
----- --------------- - ---- -- ---------- --------- -- -
----- ----- - ----------------
-- ----------------
----- ----------- - ----------------- ------ ------
-- ------- -----
----------------------------------
--
-- -------------
----- ----------- ------- --------------- -
----------- - -- -- -
----------------------------
----- ----- -------
---- --
---
-
-------- -
------ -
-----
------- ----------------------------------------
------
--
-
-
----- ------------------ - -------- -- --
---------------- ---- -- -------------------------------
---
------ ------- ------------- ---------------------------------总结
通过以上的优化措施，可以有效地提升 React Redux 应用的渲染效率。可以从不同的方向入手，尽可能地减少更新的次数，从而提升应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648cbf8448841e9894b12ec8