react如何写一个纯ui组件
编写纯UI组件的核心原则
纯UI组件（又称"无状态组件"或"展示组件"）应只关注界面渲染，不包含业务逻辑或状态管理。这类组件通过props接收数据，通过回调函数与父组件通信。
函数组件实现方式
使用函数组件是最简洁的写法，适合简单的UI展示：
const Button = ({ text, onClick, disabled = false }) => (
<button
onClick={onClick}
disabled={disabled}
className="primary-btn"
>
{text}
</button>
);类组件实现方式
当需要生命周期方法时可以使用类组件：
class Modal extends React.Component {
render() {
const { title, content, onClose } = this.props;
return (
<div className="modal-overlay">
<div className="modal-content">
<h3>{title}</h3>
<p>{content}</p>
<button onClick={onClose}>Close</button>
</div>
</div>
);
}
}类型检查（PropTypes）
为组件添加prop类型检查能提高可维护性：
import PropTypes from 'prop-types';
const Avatar = ({ src, size, alt }) => (
<img
src={src}
width={size}
height={size}
alt={alt}
/>
);
Avatar.propTypes = {
src: PropTypes.string.isRequired,
size: PropTypes.number,
alt: PropTypes.string
};
Avatar.defaultProps = {
size: 40,
alt: 'User avatar'
};样式处理方案
常见的样式处理方式有三种：
CSS Modules
import styles from './Card.module.css';
const Card = ({ children }) => (
<div className={styles.card}>
{children}
</div>
);Styled-components
import styled from 'styled-components';
const StyledInput = styled.input`
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
`;
const TextInput = ({ value, onChange }) => (
<StyledInput
type="text"
value={value}
onChange={onChange}
/>
);内联样式
const Badge = ({ color, text }) => {
const style = {
backgroundColor: color,
padding: '2px 6px',
borderRadius: '10px'
};
return <span style={style}>{text}</span>;
};最佳实践建议
- 保持组件单一职责原则，每个组件只做一件事
- 为可重用组件编写清晰的propTypes
- 避免在展示组件中使用状态（useState/this.state）
- 将事件处理通过props传递给父组件
- 使用默认参数处理可选props
- 为组件添加displayName便于调试
性能优化技巧
使用React.memo避免不必要的重渲染：
const MemoizedList = React.memo(({ items }) => (
<ul>
{items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
));对于类组件可以使用PureComponent：
class PureButton extends React.PureComponent {
render() {
return <button>{this.props.text}</button>;
}
}
