React-Redux 是 React 和 Redux 之间的一个绑定库，它提供了一些实用的工具，使用简单且性能优秀。然而，当我们使用 React-Redux 时，如果一次性将所有组件全部加载进入内存中，会导致页面加载速度变慢，影响用户体验。针对这个问题，我们可以使用 npm 包 react-redux-lazy。
什么是 react-redux-lazy
react-redux-lazy 是一个能够按需加载 React-Redux 组件的 npm 包。它使用了 React 的 Suspense 和 lazy，以及 Redux 的 store enhancers 让组件在需要时才会被加载进入页面。
如何使用 react-redux-lazy
安装
使用 npm 安装 react-redux-lazy
npm i react-redux-lazy
实现
首先，在 App.js 中引入待渲染的懒加载组件：
-- -------------------- ---- -------
------ ------ - ---- - ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ---- - ------- -- ------------------
----- ----- - ---------------------
-------- ----- -
------ -
--------- --------------
---- ----------------
----- --
------
-----------
--
-然后在 src/index.js 中，引入 react-redux-lazy 中间件，并设置 store enhancers 以支持按需加载：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----------------- ---- --------------------------- ------ - ------------------- - ---- --------------------------- ------ - ------------------- - ---- ------------------- ----- ----------- - -------------------- ----- ----- - ------------ ------------------------------------- ---------------------------------------------------- --
最后，在待渲染的组件中，使用 React-Redux 中的 connect 函数将 state 和 action 传递给组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- -------- ----------- - ------ ------------------------- - ----- --------------- - ----- -- -- ------ ------------ --- ------ ------- -------------------------------
示例代码
这里给出一个完整的示例代码，帮助大家更好的理解 react-redux-lazy 的使用方法。
-- -------------------- ---- -------
-- ----------
------ ------ - ---- - ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ---- - ------- -- ------------------
----- ----- - ---------------------
-------- ----- -
------ -
--------- --------------
---- ----------------
----- --
------
-----------
--
-
-- ------------
------ - ------------ --------------- - ---- --------
------ ----------------- ---- ---------------------------
------ - ------------------- - ---- ---------------------------
------ - ------------------- - ---- -------------------
----- ----------- - --------------------
----- ----- - ------------
-------------------------------------
----------------------------------------------------
--
-- -----------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- ----------- -
------ -------------------------
-
----- --------------- - ----- -- --
------ ------------
---
------ ------- -------------------------------总结
在实际开发过程中，我们常常需要使用 React-Redux 来处理数据，并且为了达到更好的用户体验，需要按需加载组件。使用 react-redux-lazy，我们就可以实现按需加载 React-Redux 组件，并且在更新组件时不需要重新加载整个页面，提高了页面渲染速度和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5c51ab1864dac670e8