react如何封装组件
封装React组件的核心方法
基于功能或UI划分组件 将重复使用的UI元素或功能逻辑抽象为独立组件。例如按钮、输入框、模态框等通用元素适合封装。功能模块如数据获取、表单验证也可单独封装。
使用Props传递数据 通过props实现父组件向子组件传递数据或配置。定义清晰的propTypes和默认值：
import PropTypes from 'prop-types';
function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}
Button.propTypes = {
text: PropTypes.string.isRequired,
onClick: PropTypes.func
};
Button.defaultProps = {
onClick: () => {}
};状态管理策略 组件内部状态使用useState或useReducer管理。复杂状态可考虑Context API或状态管理库。避免过度提升状态，保持组件独立性。
组合与children属性 利用children实现组件嵌套组合：
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="content">{children}</div>
</div>
);
}
// 使用
<Card title="示例">
<p>这是卡片内容</p>
</Card>自定义Hooks封装逻辑 将可复用的逻辑提取为自定义Hook：
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData);
}, [url]);
return data;
}高阶组件增强功能 通过HOC扩展组件能力：
function withLoading(Component) {
return function EnhancedComponent({ isLoading, ...props }) {
return isLoading ? <Spinner /> : <Component {...props} />;
};
}组件样式隔离 使用CSS Modules或styled-components实现样式封装：
import styles from './Button.module.css';
function Button() {
return <button className={styles.primary}>Submit</button>;
}类型安全(TypeScript) 为组件添加类型定义提升可靠性：
interface ButtonProps {
size?: 'small' | 'medium' | 'large';
variant?: 'primary' | 'secondary';
onClick: () => void;
}
function Button({ size = 'medium', ...props }: ButtonProps) {
// 实现
}文档与示例 为组件编写清晰的文档说明props、使用示例和注意事项。可使用Storybook等工具建立组件库文档。
性能优化手段 对复杂组件使用React.memo避免不必要的渲染：
const MemoizedComponent = React.memo(function Component({ data }) {
// 实现
});测试策略 为组件编写单元测试和集成测试：
import { render, screen } from '@testing-library/react';
test('renders button with text', () => {
render(<Button text="Click me" />);
expect(screen.getByText(/click me/i)).toBeInTheDocument();
});
