React大型项目是否应该封装并统一导入复用Button等通用组件？

为什么大公司会做统一的按钮组件 #

你猜测的设计一致性是核心原因之一，除此之外还有这些收益：

• 避免重复写高度相似的CSS，大幅减少冗余代码
• 后续迭代修改按钮样式（比如调整配色、圆角、hover效果）时，只需要修改组件本身，不需要逐个调整100多个按钮的样式，维护成本极低
• 可以统一封装按钮的交互逻辑，比如防重复点击、加载态、无障碍属性，不用每个按钮单独实现

封装按钮对性能的影响 #

封装组件只会优化性能，不会降低性能：
你现在每个按钮单独写className、单独写CSS，会产生大量冗余的CSS代码，浏览器需要加载更多样式文件、匹配更多CSS规则，反而会有额外开销。
封装为统一组件后，核心样式只需要写1-3份，浏览器只需要加载一次、解析一次，哪怕你传入自定义的宽高等内联样式，这点开销可以忽略不计，整体性能远好于分散写样式的方案。

你当前写的组件是否合理 #

你写的基础组件逻辑是正确的，不过可以进一步优化灵活性，比如：

• 把text参数改为children，支持传入图标、带格式的文本等内容，不局限于纯文本
• 新增type参数区分按钮类型（主按钮、次按钮、危险按钮等），不用分别写Button1、Button2多个组件
• 新增size参数对应不同的padding、高度预设，不用每次手动传宽高，减少重复配置
• 可以默认绑定通用的交互属性，比如type="button"避免表单默认提交问题，加aria无障碍属性等

优化后的示例代码参考：

import React from 'react'
import PropTypes from 'prop-types'

const Button = ({ children, type = 'primary', size = 'middle', width, height, onClick }) => {
    return (
        <button 
            className={`btn btn-${type} btn-${size}`} 
            style={{ width, height }}
            type="button"
            onClick={onClick}
        >
            {children}
        </button>
    )
}

Button.propTypes = {
  type: PropTypes.oneOf(['primary', 'secondary', 'danger']),
  size: PropTypes.oneOf(['small', 'middle', 'large']),
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onClick: PropTypes.func
}

export default Button

总结 #

非常建议你给项目做统一的按钮组件，不管是从设计一致性、开发效率、维护成本还是性能角度，都远优于你现在分散写按钮样式的方案。

内容的提问来源于stack exchange，提问作者willmahon