React 造轮子系列：Icon 组件思路

头像
王大冶
    阅读 8 分钟
    15

    简介

    本轮子是通过 React + TypeScript + Webpack 搭建的，至于环境的搭建这边就不在细说了，自己动手谷歌吧。当然可以参考我的源码。

    这里我也是通过别人学的，主要做些总结及说明造各个轮子的一种思路，方便今后使用别人的的轮子时自己脑中有造轮子的思想，能通过修改源码及时修改 bug，按时上线。

    本文的 Icon 组件主要是参考 Framework7 中的 Icon React Component 写的。

    想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

    为什么要造轮子

    1.为了不求人

    • 假设你使用某个UI框架发现有一个 bug,于是你反馈给开发者，开发者说两周后修复，而你的项目一周后就要上线，你怎么办？
    • 为什么很多大公司都不使用其他公司的轮子，要自己造？为了把控自己的业务，不被别人牵着走。

    2.为了不流于平庸

    • 大家都是写增删改查，你跟别人比有什么优势？你如果能说一句【我公司的人都在用我写的UI框架】是不是就很牛逼？造 UI 轮子会遇到很多技术层面而非业务层面的知识？比如一些算法。

    3.为了创造

    • 你为别人做了这么久的事情，有没有自己做什么？自驱动力。

    4.为什么是 UI 轮子，不是其他方面的轮子

    • 比如，为什么不自己写一个 React 框架，要写 React UI 框架呢？

    React.FunctionComponent 与 IconPropps

    本轮子使用 React + TypeScript 来写的，那么在 ts 中如何声明函数组件及级 Icon 组件传递参数呢，答案是使用React提供的静态方法 React.FunctionComponent 及 TypeScript 提供的接口定义。

    // lib/icon.tsx

import React from 'react'

interface IconProps {
  name: string
}

const Icon: React.FunctionComponent<IconProps> = () => {
  return (
    <span>icon</span>
  )
}

export default Icon

    在 index.txt 中调用：

    import React from "react";
import ReactDOM from "react-dom";
import Icon from './icon'
  
ReactDOM.render(<div>
  <Icon name='wechat'/>
</div>, document.body)

    对于上面的定义方式，后面的轮子会经常使用，所以不必担心看不懂。

    使用 svg-sprite-loader 加载 SVG

    在上面我们指定了 Icon 的name为wechat,那怎么让它显示微信的图标呢,首先在阿里的 Iconfont 下载对应的 SVG

    clipboard.png

    接着如何显示 svg? 这里我们使用一个 svg-sprite-loader 库，然后在对应的 webpack下的 rules 中添加：

    {
  test: /\.svg$/,
  loader: 'svg-sprite-loader'
}

    在 Icon 中引用，当然对应 tsconfig.json 也要配置(这不是本文的重点):

    import React from 'react'
import wechat from './icons/wechat.svg'

console.log(wechat)
interface IconProps {
  name: string
}

const Icon: React.FunctionComponent<IconProps> = () => {
  return (
    <span>
      <svg>
        <use xlinkHref="#wechat"></use>
      </svg>
    </span>
  )
}

export default Icon

    运行效果：

    clipboard.png

    当然 svg 里面不能直接写死，我们需要根据外部传入的 name 来指定对应的图像：

    // 部分代码
import  './icons/wechat.svg'
import './icons/alipay.svg'

const Icon: React.FunctionComponent<IconProps> = (props) => {
  return (
    <span>
      <svg>
        <use xlinkHref={`#${props.name}`}></use>
      </svg>
    </span>
  )
}

    外部调用：

    ReactDOM.render(<div>
  <Icon name='wechat'/>
  <Icon name='alipay'/>
</div>, document.getElementById('root'))

    运行效果：

    clipboard.png

    importAll

    大家有没有注意到，我需要使用哪个 svg, 需要在对应的 icon 组件导入对应的 svg,这样要是我需要100个 svg ，我就要导入100次，这样做太傻，文件也会变得冗长。

    因此我们需要一个动态导入全部 SVG 的方法：

     // lib/importIcons.js
let importAll = (requireContext) => requireContext.keys().forEach(requireContext)
try {
  importAll(require.context('./icons/', true, /\.svg$/))
} catch (error) {
  console.log(error)
}

    要想看懂上诉的代码，可能需要一点 node.js 的基础，这边建议你直接收藏好啦，下次有用到，直接拷贝过来用就行了。

    接着在 Icon 组件里面导入就行了： import './importIcons'

    React.MouseEventHandler 的使用

    当我们需要给 Icon 注册事件的时候，如果直接在组件上写 onClick 事件是会报错的，因为它没有声明接收 onClick 事件类型，所以需要声明，如下所示：

    /lib/icon.tsx

import React from 'react'
import './importIcons'
import './icon.scss';
interface IconProps {
  name: string,
  onClick: React.MouseEventHandler<SVGElement>
}

const Icon: React.FunctionComponent<IconProps> = (props) => {
  return (
    <span>
      <svg onClick={ props.onClick}>
        <use xlinkHref={`#${props.name}`} />
      </svg>
    </span>
  )
}

export default Icon

    调用方式如下：

    import React from "react";
import ReactDOM from "react-dom";
import Icon from './icon'

const fn: React.MouseEventHandler = (e) => {
  console.log(e.target);
};


ReactDOM.render(<div>
  <Icon name='wechat' onClick={fn}/>
</div>, document.getElementById('root'))

    让Icon响应所有事件

    上述我们只监听了 onClick 事件 ，但对于其它事件是不支持了，所以我们需要进一步完善。这里我们不能一个一个添加对应的事件类型，需要一个统一的事件类型，那这个是什么呢？

    通过 react 我们会找到一个 SVGAttributes 类，这里我们需要继承它：

    /lib/icon.tsx
import React from 'react'
import './importIcons'
import './icon.scss';
interface IconProps extends React.SVGAttributes<SVGElement> {
  name: string;
}

const Icon: React.FunctionComponent<IconProps> = (props) => {
  return (
    <span>
      <svg 
        onClick={ props.onClick}
        onMouseEnter = {props.onMouseEnter}
        onMouseLeave = {props.onMouseLeave}
      >
        <use xlinkHref={`#${props.name}`} />
      </svg>
    </span>
  )
}

export default Icon

    调用方式：

    import React from "react";
import ReactDOM from "react-dom";
import Icon from './icon'

const fn: React.MouseEventHandler = (e) => {
  console.log(e.target);
};


ReactDOM.render(<div>
  <Icon name='wechat' 
    onClick={fn}
    onMouseEnter = { () => console.log('enter')}
    onMouseLeave = { () => console.log('leave')}
  />
</div>, document.getElementById('root'))

    上述还是会有问题，我们还有 onFocus, onBlur, onChange 等等事件，也不可能一个一个传递进来，那还有什么方法呢。

    在 icon.tsx 中我们会发现我们用的都是通过 props 传递进来的。聪明的朋友的可能立马想到了使用展开运算符的形式 {...props},改写如下：

    ...
const Icon: React.FunctionComponent<IconProps> = (props) => {
  return (
    <span>
      <svg className="fui-icon" {...props}>
        <use xlinkHref={`#${props.name}`} />
      </svg>
    </span>
  )
}
...

    上述还是会有问题，如果使用的人也传入 className 呢，用过 Vue 就知道 Vue 是真的好，它会把传入和里面的合并起来，但 React 就不一样了，传入的会覆盖里面的，所以需要自己手动处理：

    ...
const Icon: React.FunctionComponent<IconProps> = (props) => {
  const { className, ...restProps} = props
  return (
    <span>
      <svg className={`fui-icon ${className}`} {...restProps}>
        <use xlinkHref={`#${props.name}`} />
      </svg>
    </span>
  )
}
...

    上达写法还存在问题的，如果外面没有写 className ，那么内部会多出一个 undefined

    clipboard.png

    聪明你的可能就想到了使用三目运算符来做判断，如：

    className={`fui-icon ${className ? className : ''}`}

    但这种情况如果有多个参数要怎么办呢？

    所以有人就非常聪明专门写了一个库存 classnames,这个库有多火呢，每周有300多万的下载量，它的作用就是处理 className 的情况。

    clipboard.png

    当然我们这边只做简单的处理，如下所示

    // helpers/classes
function classes(...names:(string | undefined )[]) {
  return names.join(' ')
}

export default classes

    使用方式：

    ...
const Icon: React.FunctionComponent<IconProps> = (props) => {
  const { className, name,...restProps} = props
  return (
    <span>
      <svg className={classes('fui-icon', className)} {...restProps}>
        <use xlinkHref={`#${name}`} />
      </svg>
    </span>
  )
}
...

    这样最终渲染出来的 className还是会多出一个空格，作为完美者，并不希望有空格的出现的，所以需要进一步处理空格，这里使用 es6 中数组的 filters 方法。

    // helpers/classes
function classes(...names:(string | undefined )[]) {
  return names.filter(Boolean).join(' ')
}

export default classes

    单元测试

    首先我们对我们的 classes 方法时行单元测试，这里使用 Jest 时行测试，也是 React 官网推荐的。

    classes 测试用例如下：

    import classes from '../classes'
describe('classes', () => {
  it('接受 1 个 className', () => {
    const result = classes('a')
    expect(result).toEqual('a')
  })
  it('接受 2 个 className', ()=>{
    const result = classes('a', 'b')
    expect(result).toEqual('a b')
  })
  it('接受 undefined 结果不会出现 undefined', ()=>{
    const result = classes('a', undefined)
    expect(result).toEqual('a')
  })
  it('接受各种奇怪值', ()=>{
    const result = classes(
      'a', undefined, '中文', false, null
    )
    expect(result).toEqual('a 中文')
  })
  it('接受 0 个参数', ()=>{
    const result = classes()
    expect(result).toEqual('')
  })
})

    使用Snapshot测试UI

    这里测试 UI 相关还需要使用一个库 Enzyme , Enzyme 来自 airbnb 公司，是一个用于 React 的 JavaScript 测试工具，方便你判断、操纵和历遍 React Components 输出。Enzyme 的 API 通过模仿 jQuery 的 API ，使得 DOM 操作和历遍很灵活、直观。Enzyme 兼容所有的主要测试运行器和判断库。

    icon 的测试用例

    import * as renderer from 'react-test-renderer'
import React from 'react'
import Icon from '../icon'
import {mount} from 'enzyme'

describe('icon', () => {
  it('render successfully', () => {
    const json = renderer.create(<Icon name="alipay"/>).toJSON()
    expect(json).toMatchSnapshot()
  })
  it('onClick', () => {
    const fn = jest.fn()
    const component = mount(<Icon name="alipay" onClick={fn}/>)
    component.find('svg').simulate('click')
    expect(fn).toBeCalled()
  })
})

    IDE 提示找不到 describe 和 it 怎么办？

    clipboard.png

    解决办法：

    1. yarn add -D @types/jest
    2. 在文件开头加一句 import 'jest'

    这是因为 describe 和 it 的定于位于 jest 的类型声明文件中，不信你可以按住 ctrl 并点击 jest 查看。

    如果还不行，你需要在 WebStorm 里设置对 jest 的引用：

    clipboard.png

    这是因为 typescript 默认排除了 node_modules 里的类型声明。

    总结

    以上主要是在学习造轮子过程总结的，环境搭建就没有细说了，主要记录实现 Icon 轮子的一些思路及注意事项等，想看源码，跑跑看的，可以点击这里查看。

    参考

    方应杭老师的React造轮子课程

    你的点赞是我持续分享好东西的动力，欢迎点赞！

    欢迎加入前端大家庭，里面会经常分享一些技术资源。

    clipboard.png

    javascript前端程序员react
    王大冶
    68.1k 声望105k 粉丝
    « 上一篇
    11 种在大多数教程中找不到的JavaScript技巧
    下一篇 »
    React造轮系列：对话框组件 - Dialog 思路

    引用和评论

    被 2 篇内容引用
    推荐阅读
    头像
    Next.js 15.1 发布：全面升级开发体验

    王大冶阅读 105

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.7k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    疫情特殊时期，致 SegmentFault 思否全体员工的一封公开信

    波波Nadia赞 14阅读 21.4k评论 10

    0 条评论
    得票最新