什么是 macrocosm
macrocosm 是一个基于 React 的高阶组件库，提供了大量的组件和工具函数，能够方便地进行 UI 的组合和拓展。macrocosm 意为“宏观宇宙”，意味着这个库可以帮助你构建大规模的 Web 应用程序，将所有组件和模块统一管理和组织起来。
安装 macrocosm
使用 npm 可以很方便地安装 macrocosm：
npm install --save macrocosm
使用 macrocosm
下面是一个简单的示例，演示如何使用 macrocosm 创建一个具有分页和搜索功能的用户列表组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- ---------- - ---- ------------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
- --- -- ----- ------ --
- --- -- ----- ----- --
--
----- -------- - -- ---- -- -- -
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
--
----- ---------------------- - -------------------------
----- ------------------------------- - -----------------------------------
----- --- - -- -- -
------ -
-----
-------------------------------- ------------ --
------
--
--
------ ------- ----上述代码中，我们使用了 withPagination 和 withSearch 两个高阶组件，将原本只有简单渲染功能的 UserList 组件扩展成了具有分页和搜索功能的组件。这两个高阶组件都返回一个新的组件，组件中包含了原本的组件以及一些额外的 props 和行为。
使用 withPagination
withPagination 可以将一个列表组件包装成具有分页功能的新组件。该高阶组件返回一个带有两个额外 props 的新组件：
- data：当前页的数据
- onChange：页码变化时的回调函数
-- -------------------- ---- -------
------ - -------------- - ---- ------------
----- -------- - -- ---- -- -- -
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
--
----- ---------------------- - -------------------------
----- --- - -- -- -
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
- --- -- ----- ------ --
- --- -- ----- ----- --
--
------ -
-----
----------------------- ------------ ---------------------- --
------
--
--
------ ------- ----上述代码中，我们将 UserList 组件包装成了 UserListWithPagination 组件，并将 users 数组传递给了该组件的 data prop。组件将根据当前页面显示相应的数据，并在页码变化时触发 onChange 回调函数（这里我们只是简单地输出了一条日志）。
使用 withSearch
withSearch 可以将一个列表组件包装成具有搜索功能的新组件。该高阶组件返回一个带有两个额外 props 的新组件：
- data：搜索结果列表
- onChange：搜索关键字发生变化时的回调函数
-- -------------------- ---- -------
------ - ---------- - ---- ------------
----- -------- - -- ---- -- -- -
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
--
----- ------------------ - ---------------------
----- --- - -- -- -
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
- --- -- ----- ------ --
- --- -- ----- ----- --
--
------ -
-----
------------------- ------------ ---------------------- --
------
--
--
------ ------- ----上述代码中，我们将 UserList 组件包装成了 UserListWithSearch 组件，并将 users 数组传递给了该组件的 data prop。组件将根据搜索关键字显示相应的数据，并在搜索关键字变化时触发 onChange 回调函数（这里我们只是简单地输出了一条日志）。
使用多个高阶组件
如果需要在一个列表组件中同时使用分页和搜索功能，可以将该组件分别包装一次：
-- -------------------- ---- -------
------ - --------------- ---------- - ---- ------------
----- -------- - -- ---- -- -- -
------ -
----
-------------- -- -
--- ------------------------------
---
-----
--
--
----- ---------------------- - -------------------------
----- ------------------------------- - -----------------------------------
----- --- - -- -- -
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
- --- -- ----- ------ --
- --- -- ----- ----- --
--
------ -
-----
-------------------------------- ------------ ---------------------- --
------
--
--
------ ------- ----上述代码中，我们分别将 UserList 组件包装成了 UserListWithPagination 和 UserListWithPaginationAndSearch 两个组件，并将 users 数组传递给了该组件的 data prop。组件将根据搜索关键字和当前页码显示相应的数据，并在搜索关键字或页码变化时触发 onChange 回调函数（这里我们只是简单地输出了一条日志）。
总结
使用 macrocosm 可以方便地创建具有分页和搜索功能的列表组件，该库提供了多个高阶组件，可以灵活地组合和拓展组件。同时，macrocosm 的组件和工具函数也提供了相应的样式和动画效果，能够提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675281e8991b448e3d08