前言
随着前端框架技术不断发展，我们越来越依赖各种优秀的封装工具包（npm 包）来帮助我们快速开发和提高开发效率。其中，一些优秀的 npm 包，如 createElement、React 等，不仅让我们的开发变得更加优雅，同时也对前端行业的发展做出了重要贡献。
在这篇文章中，我们将介绍一个非常实用的 npm 包：made-react，它是一款可以帮助开发者更容易、更方便地构建 React 组件的库。
什么是 made-react？
made-react 是一个 React 组件库，它由一组简单易用的基础组件和强大的高阶组件构成。本库旨在为 React 开发者提供更简单、更灵活、更高效的组件开发体验。
如何使用 made-react？
安装 made-react
使用 npm 安装 made-react，输入命令：
npm install --save made-react
引入 made-react
在 React 项目中，可以使用以下方式引入 made-react：
import { Button, Input } from "made-react";使用 made-react 提供的组件
made-react 提供了很多基础组件，这里我们介绍其中的两个：Button 和 Input。
Button 组件
Button 是一个常见的按钮组件，我们可以很容易地调用它并设置样式。
举个栗子：
-- -------------------- ---- -------
------ - ------ - ---- -------------
-------- ----- -
------ -
-----
------- ----------------------------------
------- --------------------------------------
------
--
-此时，我们在页面上看到的就是两个按钮，一个是蓝色的 Primary 按钮，一个是灰色的 Secondary 按钮。
Input 组件
Input 是一个常见的输入框组件。
举个栗子：
-- -------------------- ---- -------
------ - ----- - ---- -------------
-------- ----- -
------ -
-----
------ ----------------- --
------
--
-此时，我们在页面上就可以看到一个带 placeholder 提示的输入框。
made-react 提供的高阶组件
除了提供基础组件以外，made-react 还提供了很多高阶组件，用于优化 React 组件的性能和功能。
下面我们详细介绍一下 made-react 提供的三个高阶组件：
withLoading 高阶组件
withLoading 高阶组件可以让我们的组件在加载中时展示一个 loading 状态的效果。
举个栗子：
-- -------------------- ---- -------
------ - ----------- - ---- -------------
-------- ----------- -
------ --- ----------------- -- -
------------- -- -
--------------- ---------
-- ------
---
-
-------- ----------- -
------ ------------------------
-
----- --------------- - ----------------- -----------
-------- ----- -
------ -
-----
---------------- --
------
--
-此时，我们在页面上看到的是一个正在加载中的状态，2s 后页面上将显示 "Hello, World!"。
withError 高阶组件
withError 高阶组件可以让我们在组件出现错误时展示一个 Error 状态的效果。
举个栗子：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
-
-------- ----------- -
------ ------------------------
-
----- ------------- - --------------- -----------
-------- ----- -
------ -
-----
-------------- --
------
--
-此时，我们在页面上看到的是一个出错的状态，并提示 "哎呀出错了"。
withModal 高阶组件
withModal 高阶组件可以让我们的组件展示一个弹出层的效果。
举个栗子：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------------- -
------ ----------------------
-
----- --------------- - ------------------
-------- ----- -
----- ----------- ------------- - ----------------
----- ---- ------ - -------------
----- ----------- - ---- -- -
----------
-------------------
--
------ -
-----
------- ----------- -- ------------------------------
------- ----------- -- ------------------------------
---------- -- -
---------------- ----------- -- -------------------- ------- --
--
------
--
-此时，我们在页面上看到的是两个按钮，分别可以打开不同的弹窗，弹窗的内容是根据传入的 id 不同而不同。
总结
通过本文的介绍，我们学习到了如何使用 made-react 这个非常实用的 npm 包，并且了解了一些高阶组件的使用。在未来的 React 开发中，我们可以利用 made-react 提供的组件和高阶组件，快速完成各种复杂的开发任务，提高我们的开发效率，让我们的代码变得更加优雅、易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739e81e8991b448e9965