前端工程化实战：React 模块化开发、性能优化和组件化实践

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Button } from 'antd';
 
// 导入样式文件
import './style.less';
 
// 自定义组件
export default class CustomComponent extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    onClick: PropTypes.func,
    text: PropTypes.string,
  };
 
  static defaultProps = {
    className: '',
    onClick: () => {},
    text: 'Click Me',
  };
 
  handleClick = () => {
    const { onClick } = this.props;
    onClick();
  };
 
  render() {
    const { className, text } = this.props;
    const classes = classNames('custom-component', className);
 
    return (
      <div className={classes}>
        <Button onClick={this.handleClick}>{text}</Button>
      </div>
    );
  }
}

这个代码实例展示了如何在React中实现一个简单的组件，该组件接收一些属性，并使用classNames库来处理条件类名的应用，以及使用PropTypes进行属性类型检查。同时，它使用了PureComponent来优化渲染性能，并使用onClick属性来处理点击事件。最后，它展示了如何导入和使用来自Ant Design的Button组件。