在前端开发中，我们经常需要对组件进行一些公共逻辑的抽象。比如输入框需要实时校验，菜单需要权限控制等等。这时候我们就可以使用高阶组件(Higher-Order Component，简称HOC)来实现这些公共逻辑的复用。而 @dmartss/next-hoc 就是一个专门为 Next.js 开发的高阶组件库，本篇文章将为大家介绍 @dmartss/next-hoc 的具体使用方法。
安装
使用 npm 进行安装：
npm install @dmartss/next-hoc
集成
@dmartss/next-hoc 的使用非常简单。首先在 pages 目录下新建一个 _app.js 文件，然后使用 withInit 和 withRedux 进行包装：
import { withInit, withRedux } from '@dmartss/next-hoc'
function MyApp({ Component, pageProps, store }) {
return <Component {...pageProps} />
}
export default withInit(withRedux(MyApp))- withInit: 初始化页面请求，常用于获取全局数据。
- withRedux: 将页面注入到 Redux，使得页面可以使用全局状态。
这样就完成了对 _app.js 文件的 HOC 包装。接下来我们可以根据实际需求添加其他的 HOC。
示例
下面我们以一个 todo list 的例子来演示如何使用 @dmartss/next-hoc 进行开发。我们首先需要创建一个 Redux store，并添加增删改查的 action：
-- -------------------- ---- -------
-- --------
------ - ----------- - ---- -------
------ ----- ----------- - -
--------- -----------
------------ --------------
---------- ------------
------------ -------------
-
------ ----- ------- - ------ -- --
----- ---------------------
----
--
------ ----- ---------- - ---- -- --
----- ------------------------
--
--
------ ----- -------- - ---- ----- -- --
----- ----------------------
---
----
--
------ ----- ---------- - ---- -- --
----- ------------------------
--
--
----- ------------ - -
------ --
-
-------- ------------- - ------------- ------- -
------ ------------- -
---- ---------------------
------ -
------ -
---------------
-
--- -------------------------- ----- -- ----------------- ------- --- - --
---------- ------
----- -----------
-
-
-
---- ------------------------
------ -
------ ----------------------- -- ------- --- ----------
-
---- ----------------------
------ -
------ -------------------- --
------- --- --------- - - -------- ----- ----------- - - ----
-
-
---- ------------------------
------ -
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
-
--------
------ -----
-
-
------ ----- --------------- - ---------------- -- -
------ -------------------- ---------------
-然后我们在 pages 目录下新建一个 todos.js 文件，在这个文件中我们使用 withRedux 和 withAuth 来对页面进行包装：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - -------- ----------- --------- ---------- - ---- ----------
------ - ---------- -------- - ---- -------------------
-------- ------- -
----- ----- - ------------------- -- ------------
----- -------- - -------------
----- --------- ----------- - ------------
----- ------------- - --- -- -
------------------
-- ----------------- -
------
-
--------------------------
--------------
-
----- ---------------- - ---- -- -
------------------------
-
----- -------------- - ---- ----- -- -
--------------------- ------
-
----- ---------------- - ---- -- -
------------------------
-
------ -
-----
----- -------------------------
------ --------------- ------------- -- --------------------------- --
------- ----------------- -------------
-------
----------------- -- -
---- --------------
------
---------------
------------------------
------------ -- --------------------------
--
------
-----------------
------------- -- ----------------------- ----------------
--
------- ----------- -- ------------------------------------------
------
---
------
-
-
------ ------- --------------------------这里我们通过 useSelector 从 Redux 中获取 todos 数组，然后通过 useDispatch 创建 dispatch 函数，用来派发 action。同时我们在表单中绑定了 value 和 onChange 事件用来控制新建 todo 的输入。
最后我们使用 withAuth 来实现 auth 权限的校验，确保只有登录用户才能访问 todo list 页面。
总结
通过本文的介绍，我们学习了如何使用 @dmartss/next-hoc 来对 Next.js 应用进行开发。通过配合 Redux 来进行状态管理，使得页面的数据交互更加高效和统一。同时我们还学习了如何使用高阶组件对通用逻辑进行抽象，增强代码的复用性。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b29
