使用 Redux 优化 React 应用的性能
随着前端应用复杂度的不断提高，React 作为一款高度可定制且模块化的 UI 库，越来越被广泛使用。然而，在大型应用中，不断改变组件状态的操作可能成为应用性能的瓶颈。为了解决这个问题，Redux 应运而生，成为 React 应用中数据管理的首选方案。
Redux 是一种状态管理库，它通过将应用的状态集中于一个地方，并通过单向数据流管理状态的变化，简化了组件之间的数据传递和管理。Redux 允许你将你的应用的状态存储在一个统一的地方——store，并提供了一套 API 用来管理状态的变化。
在 Redux 中，数据流是单向的，数据的改变只能通过 action 来触发，然后被传递给 reducer，最后在 store 中更新状态。这种方式不仅使应用状态更加可控和一致，还使得调试和维护变得更加容易。
下面我们将通过一个示例来描述如何使用 Redux 优化 React 应用的性能。
示例代码
我们考虑一个简单的购物车应用，其中包含一个商品列表和一个购物车列表。每个商品可以被添加到购物车中，同时购物车中的商品可以被删除。
首先我们定义一个商品组件 Product ，它将显示商品的详细信息和一个添加到购物车的按钮。点击按钮时，我们需要将该商品添加到购物车并更新购物车列表。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ------- - -- ----- ------ ----------- -- -- -
-----
---------------
----------------
------- ------------------------- -- -------------
------
--
----------------- - -
----- ----------------------------
------ ----------------------------
------------ -------------------------
--
------ ------- --------接下来我们定义一个购物车组件 Cart ，它将显示购物车列表，可以删除购物车中的商品。点击删除按钮时，我们需要将该商品从购物车中删除并更新购物车列表。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ---- - -- --------- ---------------- -- -- -
-----
-------------
----
--------------------- -- -
--- -----------------
-------------- - --------------- - -------------------- --
------- ----------- -- ---------------------------------------------
-----
---
-----
------
--
-------------- - -
--------- ------------------
-----------------
--- ----------------------------
----- ----------------------------
------ ----------------------------
--------- ---------------------------
--
-------------
----------------- -------------------------
--
------ ------- -----现在我们需要将这两个组件结合起来并实现购物车的核心逻辑。我们使用 React 自带的 useState 和 useReducer hooks 来实现组件级别的状态管理。
-- -------------------- ---- -------
------ ------ - --------- ---------- - ---- --------
------ ------- ---- ------------
------ ---- ---- ---------
----- ------------ - - --------- -- --
-------- -------------- ------- -
------ ------------- -
---- --------------
------ -
--------- -
------------------
- ------------------ --------- -------------------------------------- - - -- - -
-
--
---- -------------------
------ -
--------- ----------------------------- -- ---------- --- -----------------
--
--------
----- --- ----------------- ---------
-
-
----- --- - -- -- -
----- ------- --------- - ------------------- --------------
----- --------- - ------- -- -
----- ----- - -------------------------- -- ---- --- ------------
---------- ----- -------------- -------- ----- ---
--
----- -------------- - --------- -- -
---------- ----- ------------------- --------- ---
--
------ -
-----
--------
------------
------------
--------------- -- ----------- --- -- ----- -------- ------ ---- ---
--
--------
-------------
------------
--------------- -- ----------- --- -- ----- --------- ------ ---- ---
--
----- ------------------------- --------------------------------- --
------
--
--
------ ------- ----现在我们已经实现了基本功能，但是如果我们在控制台中打开 React Profiler 观察这个应用的渲染情况时，会发现在添加或删除商品时，整个应用都会重新渲染。这是因为我们的购物车状态存储在组件级别的状态中，当状态变化时，所有组件都会重新渲染。为了提高性能，我们需要将购物车状态提取到 Redux store 中，以避免组件树的重新渲染。
首先，我们创建一个 store 并定义我们的 ADD_TO_CART 和 REMOVE_FROM_CART action。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - --------- -- --
-------- ------------- - ------------- ------- -
------ ------------- -
---- --------------
------ -
--------- -
------------------
- ------------------ --------- -------------------------------------- - - -- - -
-
--
---- -------------------
------ -
--------- ----------------------------- -- ---------- --- -----------------
--
--------
------ ------
-
-
----- ----- - ---------------------接下来我们需要修改组件，使用 Redux store 中的 state 和 dispatch 方法。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
----- ------- - -- ----- ------ ----------- -- -- -
-----
---------------
----------------
------- ------------------------- -- -------------
------
--
----------------- - -
----- ----------------------------
------ ----------------------------
------------ -------------------------
--
----- ------------------ - ---------- --------- -- --
------------ -- --
----------
----- --------------
-------- - --- ------------ ----- -------------- ------ -------------- --
------ ----------------------------- -- ---- --- ------------
--
---
------ ------- ------------- ------------------------------- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
----- ---- - -- --------- ---------------- -- -- -
-----
-------------
----
--------------------- -- -
--- -----------------
-------------- - --------------- - -------------------- --
------- ----------- -- ---------------------------------------------
-----
---
-----
------
--
-------------- - -
--------- ------------------
-----------------
--- ----------------------------
----- ----------------------------
------ ----------------------------
--------- ---------------------------
--
-------------
----------------- -------------------------
--
----- --------------- - ----- -- --
--------- --------------
---
----- ------------------ - -------- -- --
----------------- --------- -- ---------- ----- ------------------- --------- --
---
------ ------- ------------------------ --------------------------现在我们可以将组件与 store 进行连接，使用 Redux store 中的状态和方法更新应用程序。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ------- ---- ------------
------ ---- ---- ---------
----- --- - -- -- -
--------- --------------
-----
-------- ------ ------------ ------------ --
-------- ------ ------------- ------------ --
----- --
------
-----------
--
------ ------- ----现在，在控制台中打开 React Profiler 再次观察应用程序的渲染情况。添加或删除商品时，只有购物车组件会重新渲染，而不是整个应用程序。这项优化显著提高了应用程序的性能。
总结
使用 Redux 优化 React 应用的性能就是使我们的应用程序更高效，避免组件树的重新渲染。通过将状态提取到 Redux store 中，我们可以在应用程序中实现单向数据流和更一致的状态管理。
在实际应用中使用 Redux，需要不断调整和完善代码的结构，确保性能和可维护性。此外，还需要在适当的情况下使用 Redux 相关的优化工具，以进一步提高应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64585203968c7c53b0ab6d56