使用React进行组件库开发的实例

概述

我们都知道，组件化的开发模式对于我们的开发效率有着极大的提升，针对我们日常使用的基本组件进行封装，可以大量的简化我们对于基本UI的关注度，让我们的工作聚焦在业务逻辑上，很好的分离业务与基础UI的代码，使得整个项目更有调理，这也是我们要进行本组件库开发的原因。

然而现有React开源组件有很多，像ant-design和material-ui等等，是否需要花费精力打造适合自身团队的组件库往往需要酌情考虑。我们来看下我现有团队及业务的几个特点：

1. 前端人员较多，需要相互协作，且有余力对组件进行开发

2. 产品业务相对复杂，需对某些组件进行定制化开发

3. 已经有成熟的设计规范，针对各种基础组件、基础样式等进行定义

4. 目前的项目较为凌乱，第三方组件引用杂乱无章

可以看出，我们拥有封装自己组件的精力和基础，并且拥有通过基础组件封装改变目前开发现状的需求。所以，这件事情是我们应该并且需要尽快完成的事情。

技术选型

针对组件库的封装，我们首先面对的是技术选型以及方案的规划。大概包括以下两点：

1. 最基本的技术方案

2. 开发流程和规范

技术方案选择

Webpack + React + Sass

由于团队现有的项目都是基于React+Redux进行开发的，那我们选择的开发语言无疑是React。

SASS

针对css选择，虽然现在针对组件化开发，比较流行CSS Modules和CSS-IN-JS两中模块化解决方案，我们更希望我们的组件是可进行定制的。因此针对组件，我们以Sass作为预编译语言，提搞效率和规范性。配合css-modules，我们可以很方便的进行针对实际需求进行样式更改。例如我们有一个Tab组件，我们已经定义好了其通用的样式：

.tip-tab {
 border: 1px solid #ccc;
}
.tip-tab-item {
 border: 1px solid #ccc;
 
 &.active {
 border-color: red;
 }
}

而在业务中，针对某一个需求，我们需要针对Tab组件的样式进行微调。让其在激活(active)状态下border-color是蓝色的。你当然可以说，我们可以让我们的组件暴露出一些props，针对这些修改进行配置，传入不同的props对应不同的风格。但是我们往往无法满足所有的业务需求，不可能针对组件把各种样式都封装进去。针对这种方案，我们采用css-modules为其添加唯一的模块样式：

<Tab styleName="unique-tab" />

针对该模块，对其进行基本样式的修改:

.unique-tab {
 :global {
 .tip-tab-item {
 border-color: #eee;
 
 &.active {
 border-color: blue;
 }
 }
 }
}

这样，针对该模块的定制样式，能很好的进行针对需求的样式定制，同时不对全局样式进行污染。

Icon

针对项目图标，计划使用svg-sprite方案。但是由于产品处于在不断迭代的过程中，新的图标不断在增加。目前我们并不会对图标统一进行打包，而是在每次进行组件打包的过程中，从项目中导入所有的图标。用以下方式进行引入：

其实更好的方式是针对所有的图标进行统一打包，生成svg-spirte文件(具体原理可以查询svg-sprite,在此不再赘述)。当我们进行使用时，只需直接引用即可，避免每次都进行打包，减少webpack处理依赖的时间：

<Icon type="error" />

开发流程和规范

针对开发流程和规范，我们遵循以下几个原则：

1. 组件库完全于项目进行开发，便于后续多个项目进行使用等

2. 组件库包含三种模式：开发，测试，打包，文档案例，区分不同的入口及状态

3. 使用pure-renderautobind等尽可能保证组件的性能及效率

4. 保证props和回调的语义性，如回调统一使用handleXXX进行处理

为了便于后续的扩展，我们更希望整个组件库完全脱离于项目进行开发。保证组件库仅对于最基本的组件进行封装，将项目UI代码与业务逻辑进行分离。

针对不同的模式下，我们有不同的文件入口，针对开发模式，我们启动一个dev-server, 在里面对组件进行基本的封装，并进行调试。打包时，我们只需对组件内容进行封装，暴露统一的接口。在文档中，我们需要进行案例和说明的展示。所以我们在利用webpack的特性进行各种环境的配置：

npm run dev // 开发
npm run test // 测试
npm run build // 构建
npm run styleguide // 文档开发
npm run styleguide:build // 文档打包

组件库作为项目的最小力度支持，我们需要保证其最基本的渲染效率，因此我们采用pure-render/autobind等对其进行基本的优化。React有很多优化方式，在此不进行赘述。

打包

基础

针对组件库的打包，我们以UMD格式对其进行打包。webpack可以针对输出进行格式设置：（引自cnode)

1. “var” 以变量方式输出

2. “this” 以 this 的一个属性输出： this[“Library”] = xxx；

3. “commonjs” 以 exports 的一个属性输出：exports[“Library”] = xxx；

4. “commonjs2” 以 module.exports 形式输出：module.exports = xxx；

5. “amd” 以 AMD 格式输出；

6. “umd” 同时以 AMD、CommonJS2 和全局属性形式输出。

配置如下：

依赖

很明显，我们封装的是一个针对React的组件库，并不应该把React引用进去。一般我们可以采用externals的方式对其进行处理。

在这里, 我们采用dll方式将其与其他第三方依赖统一进行打包，并将manifest.json和三方依赖的输出文件输出到项目中去，在项目中也使用dllReference进行引用。避免在项目中使用到这些依赖时重复进行打包。

同时，由于我们的组件库处于一个不断维护的状态。这就需要我们维持好项目库和项目之间的打包关系，具体的流程如图所示：

在每次进行项目打包的时候，首先检测UI库是否有更新，若没有更新，则直接进行打包。反之继续检测dll的依赖是否有变化，若有，则打包dll,否则直接打包组件库内容。然后将输出结果同步到项目中，再进行最终打包。

当然，以上的这些流程都是自动进行的。

文档和示例

一个完善的文档对于一个组件库是及其重要的，每个组件有什么样的配置参数，拥有哪些事件回调，对应的Demo和展示效果。假设没有这些，除了封装组件的人，没有人知道它该如何使用。但是写文档的过程往往是痛苦的，在这里推荐几个文档生成库，可以极大的简化文档工作：

docsify 基于Vue的组件生成器，轻量好用
react-styleguidist 基于React的组件库文档生成器，自动根据注释生成文档，支持Demo展示。超好用
bisheng ant design自己写的文档生成器

我们使用的styleguidist, 可以将md自动转化为文档，支持在md内直接调用你封装好的组件并进行展示，简单好用。最后封装的文档大概长这样：

总结

其实封装组件库这种工作有很多的东西值得琢磨和钻研，由于篇幅原因，在这里只对开发过程中比较纠结的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。在书写的同时，不断参考下ant design这种优秀的组件库，能学到很多的东西。更深刻的理解封装组件的思想，是一个很好的过程。

宝玛科技网还为您提供以下相关内容希望对您有帮助：

以下是几个React优秀项目案例：1. Ant Design（AntD）项目简介：Ant Design 是一个基于 React 的企业级 UI 设计语言和 React 组件库，主要用于开发和服务于企业级后台产品。特点：AntD 提供了一套完整的 UI 设计规范，以及丰富的 React 组件，使得开发者可以快速构建出美观、一致且易于维护的用户界面

针对组件库的封装,我们首先面对的是技术选型以及方案的规划。大概包括以下两点:最基本的技术方案开发流程和规范技术方案选择Webpack + React + Sass由于团队现有的项目都是基于React+Redux进行开发的,那我们选择的开发语言无疑是React。SASS针对css选择,虽然现在针对组件化开发,比较流行CSS Modules和CSS-IN-JS两中模块化...

该库采用React Hooks和TypeScript进行开发，主要分为两个组件：Loader容器和Spining动画组件。其中，Loader容器负责对整个加载动画进行整体封装，简化了对Spining动画组件的调用；而Spining则提供了动画的“骨架”。在实践中，BallBeat动画就是一个具体的例子。在项目中导入并配置动画组件是极其便捷的，如需使用...

1. 技术栈选择前端框架：React（搭配 TypeScript）状态管理：Redux 或 Context API（根据项目复杂度选择）UI 组件库：Material-UI 或 Ant Design（加速开发）后端通信：RESTful API 或 GraphQL（推荐使用 Apollo Client）支付集成：Stripe 支付网关（支持信用卡、PayPal 等多种支付方式）多语言支持：i18nex...

License: MIT material-ui是一个基础的React UI组件库项目，提供永久免费使用。它实现了谷歌的Material Design系统。llvm/llvm-project Stars: 25.9k License: NOASSERTION llvm-project是一个包含模块化和可重用的编译器和工具链技术的集合项目。它的主要功能、关键特性以及核心优势在于提供高效、灵活的开...

使用createreactapp工具创建一个新的React项目。引入Echarts：通过npm命令安装Echarts库，可以使用全局引入的方式快速实现基本展示。配置Echarts图表：使用Echarts的配置项，如series、xAxis等，来配置图表。可以通过封装通用图表组件来统一处理自适应、容错等问题，简化代码结构并提高开发效率。在React组件中使用...

react-antd-column-resize 是一个旨在解决antd表格列宽不足问题的React组件。这个组件依赖于React Hooks，专为antd4、antd5以及基于antd开发的表格组件设计，如ant-design/pro-components。其核心在于 useAntdColumnResize 钩子，它提供了一个简洁而高度定制化的列宽拖动功能。要开始使用 react-antd-column-...

首先，使用 Vite 创建一个全新的 React + TypeScript 项目。Vite 的强大性能和高效开发体验使其成为现代项目构建的理想选择。其次，遵循提示安装项目所需的依赖。确保正确安装 Ant Design 相关依赖，以便集成这一业界广泛使用的 UI 组件库。接着，对 Vite 配置文件进行调整，以更好地适应 React + Type...

1.准备:npm安装以下组件 a.安装react/antd:npm install react react-dom antd --save b.安装webpack/less:npm install webpack less --save-dev webpack根据需要选择使用-g安装 c.安装babel-loader以及其他相关package:npm install babel-loader babel-core babel-preset-es2015 babel-preset-react -...

使用Go语言和React构建高性能可扩展Web应用程序的最佳实践可分为以下核心方向：一、后端架构优化1. 高性能Web服务器开发Go语言的标准库net/http提供了高效的HTTP服务基础，其轻量级设计可快速构建路由与中间件。对于复杂业务场景，推荐使用Gin或Echo等框架，它们通过路由分组、中间件链式调用等特性提升开发效率...