react如何封装
React 组件封装方法
封装 React 组件可以提高代码复用性、可维护性和可读性。以下是常见的封装方法：
基础组件封装 将 UI 元素和逻辑封装成独立组件，通过 props 传递数据和回调函数。例如按钮、输入框等基础组件。
function Button({ onClick, children }) {
return <button onClick={onClick}>{children}</button>;
}高阶组件(HOC) 接受一个组件并返回新组件的函数，用于复用组件逻辑。例如权限控制、数据获取等场景。
function withLogger(WrappedComponent) {
return function(props) {
console.log('Rendered:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}自定义 Hook 将组件逻辑提取到可复用的函数中，适用于状态逻辑的共享。例如表单处理、定时器等。
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return { count, increment };
}复合组件 通过 Context API 和 React.Children 相关方法，创建一组相关联的组件。例如选项卡、折叠面板等复杂组件。
const TabsContext = createContext();
function Tabs({ children }) {
const [activeTab, setActiveTab] = useState(0);
return (
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
<div className="tabs">{children}</div>
</TabsContext.Provider>
);
}Render Props 通过函数 prop 共享组件间的代码，适用于动态渲染内容的场景。
function MouseTracker({ render }) {
const [position, setPosition] = useState({ x: 0, y: 0 });
return render(position);
}封装最佳实践
单一职责原则 每个组件只负责一个特定功能，保持组件简单且专注。
合理的 props 设计 明确区分必须和可选的 props，使用 PropTypes 或 TypeScript 进行类型检查。
组件组合优于继承 优先使用组件组合而非继承来复用代码，React 官方推荐此模式。
性能优化 对大型组件使用 React.memo、useMemo 和 useCallback 避免不必要的重新渲染。
文档和示例 为组件添加清晰的文档说明和使用示例，方便其他开发者理解和使用。
通过以上方法可以创建可维护、可复用且高效的 React 组件，提升项目开发效率和质量。
