React-Hook 轮子公开课（从零开始）用最基础的方式写出一个简单的组件库——第一课【Icon】组件

本文链接：https://blog.csdn.net/clli_chain/article/details/125183492

文章目录

一、组件库讲解及组件库架构及搭建。

1、组件库讲解

关于组件库的话，有关注到我的朋友大家其实也都清楚，我这边其实在之前也有讲解过，零零散散的记录过一些有关于组件疑惑点、像正常我们去开发一个项目，类似现在直接用一些的 js 框架，很自然就忽略掉了一些问题点，因为平常开发的时候直接去用一些 ui 库（其实在之前很困惑的一个点，页面中的 dialog 弹窗是如何插入到页面当中去的？各种组件当中的回调事件是在怎样的一个时机触发的？表单的校验行为每个组件都不关联为什么Form表单可以触发校验？）如何使用 js 向页面中插入一个vue文件、tsx文件？

就这样带着很多很多的困惑，迷迷瞪瞪的从前年开始了我的组件开发之旅

那不免得最先说的还是很感谢 element、antd、iview、bin-ui，这些优质的组件库以及开发这些组件库的开发工作者们，在开发时不免得遇到一些困惑点，开源的源码给予了我很大的帮助，在这里也是由衷的感谢。

有兴趣的同学可以先着手看源码，之前写的一系列开源组件库项目（有帮助的同学也帮忙点个star👍）

名称	官网	github
tinkerbell-ui(vue2.0)	http://tinkerbell.top	https://github.com/hanbingxu82/tinkerbell-ui
tinkerbell-ui(vue3.0)	—	https://github.com/hanbingxu82/tinkerbell-ui-next
tinkerbell-ui(react-hook)	—	https://github.com/hanbingxu82/tinkerbell-ui-react

2、组件库架构及搭建

关于脚手架搭建的话，我这边是采用的 microbundle-crl 各位可以参考配置方案进行配置，但在后续的测试环境我这边进行了拆解编码时使用 react-scripts 进行运行，在打包时使用build进行打包，并且因为无法打包woff、ttf等字体文件，所以要在打包命令中对你的字体的文件进行特殊处理，各位可以对我的进行参考，也可以直接找到我的架子版本 commit 将我的架子拉下来进行使用

 "build": "microbundle-crl --css-modules false --no-compress --format modern,cjs && cp -r src/packages/Icon/fontcss/* ./dist ",
 "start": "microbundle-crl --css-modules false watch --no-compress --format modern,cjs & cp -r src/packages/Icon/fontcss/* ./dist",

二、内容准备及代码讲解

1、内容准备方面 iconfont 图标

我在这边是直接抓的 iconfont 图标库，大家也可以根据教程来，创建一个图标库，将css字体文件下载到本地移植到项目当中，当移植完成后所呈现的样式
在这里插入图片描述
这个时候我们就可以在我们的项目中引入 iconfont.css ,并完成使用

class=“iconfont 对应class样式”

2、代码详解

2.1、Icon组件内容 index.tsx

import React, { useState, useEffect } from 'react'
import './fontcss/iconfont.css'
interface Iprops {
  name: string //class 名称
  size: number | string // 图标大小
  color: string // 字体颜色
}
function Icon(props: any) {
  // 解构 porps
  const { name, size, color }: Iprops = props
  // style 对象 用于每次都更新props值实现数据重载（可理解为浅拷贝）
  const [styleObj, setStyleObj]: any = useState({
    fontSize: 16,
    color: ''
  })
  // 图标点击事件 触发props回弹
  function handleClick(e: any) {
    // 判断props有没有传递 onClick 事件，如果有的话就触发
    props.onClick && props.onClick(e)
  }
  useEffect(() => {
    if (size) {
      setStyleObj({
        fontSize: `${size}px`,
        width: '18px',
        height: '18px',
        color: color
      })
    }
    if (color) {
      setStyleObj({
        fontSize: `${size}px`,
        color: color
      })
    }
  }, [size, color]) // 监听size，color 严格意义上来说监听的是 props.size,props.color, 不过这样问题也不大 因为解构了每次styleObj保持的都是最新数据
  return (
    <i
      {...props}
      onClick={handleClick}
      className={['tb-icon', 'iconfont', name].join(' ')}
      style={styleObj}
    ></i>
  )
}
export default Icon