在现代 Web 开发中，组件化已成为一种不可或缺的技术。为了提高组件的复用性以及开发效率，我们通常会选择使用第三方 UI 库，其中 in-ui-components-react 就是一款非常优秀的 npm 包。
本文将介绍 in-ui-components-react 的基本用法和高级用法，并结合详细的代码示例帮助大家快速上手。
基本用法
首先，我们需要安装 in-ui-components-react 包。使用 npm 命令即可：
npm install in-ui-components-react
接着，在代码中 import 相应的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------------------
-------- ----- -
------ -
------------- --------------
--
-
------ ------- ----注意，我们导入的是 Button 组件，并直接使用它即可。
在以上代码中，我们利用了 JSX 的语法规则，将 Button 组件包裹在一个返回 JSX 的函数中，并将其输出到页面上。这样，即可在页面上看到一个简单的按钮。
当然，在实际开发过程中，我们也可以采用其他的语法规则，比如将组件 import 到一个更大的组件中，再将其渲染到页面上。这里不再赘述。
API 介绍
in-ui-components-react 包提供了多个组件，我们在这里只介绍部分常用的组件及其用法。更多组件相关的 API 信息可以在对应组件的文档中查看。
Button
Button 组件是开发中常用的组件之一，其用法如下：
import {Button} from 'in-ui-components-react';
<Button>Click Me</Button>Button 组件的 props 如下：
type: string，按钮类型，可选值为'default'（默认）,'primary','link','ghost','dashed'size: string，按钮尺寸，可选值为'small','default'（默认）,'large'shape: string，按钮形状，可选值为'circle','round'，默认值为'circle'disabled: boolean，禁用状态，true 即为禁用loading: boolean，加载状态，true 即为正在加载中onClick: Function，按钮点击事件的回调函数
Input
Input 组件用于接收用户的输入，常常用于输入表单等场景。用法如下：
import {Input} from 'in-ui-components-react';
<Input placeholder="Please input..."/>Input 组件的 props 如下：
type: string，输入框类型，可选值为'text','password','number'等等value: string，输入框的值defaultValue: string，输入框的默认值placeholder: string，输入框内提示文字disabled: boolean，禁用状态，true 即为禁用onChange: Function，输入框内容改变时的回调函数
Icon
Icon 组件用于展示图标，可用于按钮、提示框等场景。用法如下：
import {Icon} from 'in-ui-components-react';
<Icon type="search"/>Icon 组件的 props 如下：
type: string，图标类型，可选值为符号类图标名称，如'search','arrow-up'；也可传入一个 svg 文件的路径
高级用法
除了基本用法，in-ui-components-react 还提供了一些高级用法，下面将简要介绍其中的两个：
主题定制
in-ui-components-react 的样式是根据 Ant Design 进行的二次封装。如果默认主题不能满足我们的需求，我们可以通过覆盖默认样式、修改 less 变量等方式进行主题定制。
首先，创建一个 custom-theme.less 文件， 放在项目的根目录下，并通过 modifyVars 属性配置 less 变量：
-- -------------------- ---- ------- ------- -------------------------------------------------------- -- -- ------- ---- --------------- -------- -- ----- ----------------- -------- -- ------ ---------------- -----
接着，在项目的入口文件中引入该 less 文件：
import 'custom-theme.less';
这样，我们即可完成 in-ui-components-react 的主题定制。
按需加载
in-ui-components-react 包内置的所有组件都会被打包到一起，可能会导致打包后的体积过大。为了优化这一问题，我们可以通过按需加载的方式，只引入需要的组件，从而节省页面加载时间。
首先，我们需要安装 babel-plugin-import：
npm install babel-plugin-import --save-dev
接着，在 .babelrc 文件中进行如下配置：
{
"plugins": [
["import", { "libraryName": "in-ui-components-react", "libraryDirectory": "lib", "style": "css" }]
]
}在代码中，我们可以像这样 import 组件：
import {Button} from 'in-ui-components-react';这样，我们即可按需引入组件，从而减少体积。
结语
本文介绍了 npm 包 in-ui-components-react 的基本用法、常用组件及 API 介绍、高级用法等，希望有助于大家在实际开发中使用该包。当然，如果您想了解更多相关知识，建议查阅 in-ui-components-react 官方文档或者深入学习 Ant Design 的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f80238a385564ab6b33