react元素如何复用
React 元素的复用方法
React 提供了多种方式实现元素的复用，核心思想是通过组件化、状态管理和组合模式来减少重复代码。
组件化封装
将可复用的 UI 部分提取为独立组件，通过 props 传递动态数据。例如：
function Button({ text, onClick }) {
return <button onClick={onClick}>{text}</button>;
}
// 复用
<Button text="Submit" onClick={handleSubmit} />高阶组件（HOC）
通过函数包装组件实现逻辑复用。例如实现权限控制：
function withAuth(WrappedComponent) {
return (props) => {
const isAuthenticated = checkAuth();
return isAuthenticated ? <WrappedComponent {...props} /> : <LoginPage />;
};
}
const AuthButton = withAuth(Button);自定义 Hook
封装可复用的状态逻辑。例如数据获取：
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
}
// 复用
const userData = useFetch('/api/user');Render Props
通过组件属性传递渲染逻辑：
<DataProvider render={data => <DisplayData data={data} />} />Context API
跨层级共享数据：
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
// 任意子组件消费
const theme = useContext(ThemeContext);复用策略选择建议
- UI 展示复用：优先使用组件化 +
props - 逻辑复用：自定义 Hook 或 HOC
- 跨组件状态：Context API 或状态管理库
- 动态组合：Render Props 或 Children 模式
通过组合这些模式，可以构建出高度可复用的 React 应用架构。
