react如何重用组件
React 重用组件的常用方法
通过 Props 传递数据
将组件设计为接收动态数据，通过 props 传递不同内容。例如：
function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}
// 重用示例
<Button text="提交" onClick={handleSubmit} />
<Button text="取消" onClick={handleCancel} />使用 Children 插槽
通过 props.children 允许组件嵌套任意内容，增强灵活性：
function Card({ children }) {
return <div className="card">{children}</div>;
}
// 重用示例
<Card><h1>标题</h1></Card>
<Card><p>正文内容</p></Card>高阶组件（HOC）
通过函数包装组件，复用逻辑（如鉴权、数据获取）：
function withAuth(WrappedComponent) {
return (props) => {
const isAuthenticated = checkAuth();
return isAuthenticated ? <WrappedComponent {...props} /> : <LoginPage />;
};
}
const AuthButton = withAuth(Button);自定义 Hook
提取通用逻辑到 Hook 中，供多个组件调用：
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return { count, increment };
}
// 组件中调用
const { count, increment } = useCounter(0);组件组合（Composition）
通过拆分小组件再组合实现复用：
function Form() {
return (
<form>
<Input label="用户名" />
<Input label="密码" type="password" />
</form>
);
}Context API
跨层级共享数据，避免逐层传递 Props：
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
// 子组件通过 useContext(ThemeContext) 获取值注意事项
- 避免过度抽象：仅在逻辑或 UI 确实可复用时拆分组件。
- 命名规范：组件名使用 PascalCase，Hook 名以
use开头。 - 性能优化：对高频重用的组件使用
React.memo避免不必要的渲染。
