react如何封装一个组件
封装 React 组件的核心步骤
明确组件的职责与输入输出
确定组件的功能边界，明确接收的 props（输入）和渲染的 UI 或触发的回调（输出）。例如，一个 Button 组件可能接收 onClick 和 children 作为 props。
设计组件接口
使用 TypeScript 或 PropTypes 定义 props 类型，增强可维护性。例如：
interface ButtonProps {
onClick: () => void;
children: React.ReactNode;
variant?: 'primary' | 'secondary';
}实现组件逻辑与 UI
根据 props 控制组件行为和渲染。避免内部状态除非必要，优先通过 props 控制。例如：
const Button = ({ onClick, children, variant = 'primary' }: ButtonProps) => {
return (
<button
className={`button-${variant}`}
onClick={onClick}
>
{children}
</button>
);
};处理默认值与可选参数
为可选 props 提供默认值，如 variant 默认为 'primary'。通过解构赋值简化默认值设置。
添加样式与主题支持
使用 CSS Modules 或 styled-components 封装样式。例如：
/* Button.module.css */
.primary { background: blue; }
.secondary { background: gray; }提供组件文档与示例
通过 Storybook 或代码注释说明组件用法。例如：
/
* 通用按钮组件
* @param onClick 点击事件回调
* @param variant 按钮类型（primary/secondary）
*/高级封装技巧
支持 ForwardRef
需要访问 DOM 时，使用 forwardRef 传递 ref。例如：
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ onClick, children }, ref) => (
<button ref={ref} onClick={onClick}>{children}</button>
)
);使用 Context 实现深层定制
通过 Context API 提供主题或配置的全局覆盖能力。例如：
const ThemeContext = createContext('light');
const ThemedButton = () => {
const theme = useContext(ThemeContext);
return <button className={`theme-${theme}`}>Click</button>;
};性能优化
对大型组件使用 React.memo 避免不必要的渲染，或通过 useCallback 缓存事件处理函数。
测试策略
结合 Jest 和 React Testing Library 编写单元测试，验证渲染逻辑与交互行为。例如：
test('calls onClick when clicked', () => {
const onClick = jest.fn();
render(<Button onClick={onClick} />);
fireEvent.click(screen.getByRole('button'));
expect(onClick).toHaveBeenCalled();
});
