react元素如何复用
React 元素复用的方法
在 React 中，复用元素可以通过多种方式实现，以下是几种常见的方法：
组件化
将重复的 UI 部分提取为独立的组件，通过 props 传递不同的数据或配置。这是 React 中最基础的复用方式。
function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}
// 复用 Button 组件
<Button text="Submit" onClick={handleSubmit} />
<Button text="Cancel" onClick={handleCancel} />高阶组件 (HOC)
通过高阶组件包装现有组件，复用逻辑或行为。HOC 是一个函数，接收组件并返回增强后的新组件。
function withLogger(WrappedComponent) {
return function(props) {
console.log('Rendered:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}
const EnhancedButton = withLogger(Button);Render Props
通过 render props 模式，将组件的渲染逻辑委托给父组件，实现动态复用。
function DataFetcher({ render }) {
const [data, setData] = useState(null);
useEffect(() => {
fetchData().then(setData);
}, []);
return render(data);
}
// 复用 DataFetcher
<DataFetcher render={data => <div>{data}</div>} />自定义 Hook
将可复用的逻辑封装为自定义 Hook，供多个组件调用。自定义 Hook 可以包含状态和副作用。
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return { count, increment };
}
// 复用 useCounter
function CounterA() {
const { count, increment } = useCounter(0);
return <button onClick={increment}>{count}</button>;
}上下文 (Context)
通过 React Context 共享数据或状态，避免逐层传递 props，实现跨组件复用。
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return <Button />; // Button 可以访问 ThemeContext
}组合模式
通过组件组合（composition）而非继承，将多个小组件组合为复杂 UI，提高复用性。
function Layout({ header, sidebar, content }) {
return (
<div>
<div className="header">{header}</div>
<div className="body">
<div className="sidebar">{sidebar}</div>
<div className="content">{content}</div>
</div>
</div>
);
}
// 复用 Layout
<Layout
header={<Header />}
sidebar={<Sidebar />}
content={<MainContent />}
/>选择建议
- 对于 UI 复用，优先使用组件化或组合模式。
- 对于逻辑复用，优先使用自定义 Hook 或 HOC。
- 对于跨组件数据共享，使用 Context。
- 动态渲染场景可考虑 Render Props。
