react高阶组件实现
高阶组件（HOC）基础概念
高阶组件是React中用于复用组件逻辑的高级技术，本质是一个函数，接收一个组件并返回一个新组件。HOC不会修改原组件，而是通过组合方式扩展功能。
实现高阶组件的核心步骤
定义HOC函数
创建一个函数，接收被包装组件（WrappedComponent）作为参数，返回一个新的增强组件。例如实现一个日志记录的HOC：
function withLogger(WrappedComponent) {
return function EnhancedComponent(props) {
console.log('Rendered:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}使用HOC
通过调用HOC函数包裹目标组件：
const EnhancedButton = withLogger(Button);
// 使用增强后的组件
<EnhancedButton onClick={handleClick} />常见应用场景
属性代理（Props Proxy）
通过HOC拦截或添加props：
function withExtraProps(WrappedComponent) {
return function(props) {
const extraProps = { data: 'additional data' };
return <WrappedComponent {...props} {...extraProps} />;
};
}反向继承（Inheritance Inversion）
通过继承被包装组件控制渲染：
function withAuth(WrappedComponent) {
return class extends WrappedComponent {
render() {
if (this.props.isAuthenticated) {
return super.render();
}
return <div>Please login</div>;
}
};
}注意事项
传递ref问题
使用React.forwardRef解决ref传递：
function withRefForwarding(WrappedComponent) {
return React.forwardRef((props, ref) => {
return <WrappedComponent {...props} forwardedRef={ref} />;
});
}避免HOC嵌套冲突
确保每次调用HOC时生成新的组件类，防止静态方法丢失：
function withSubscription(WrappedComponent) {
class WithSubscription extends React.Component {
/* ... */
}
// 复制静态方法
WithSubscription.staticMethod = WrappedComponent.staticMethod;
return WithSubscription;
}实际案例
数据请求HOC
封装通用数据加载逻辑：
function withDataFetching(url) {
return function(WrappedComponent) {
return class extends React.Component {
state = { data: null, loading: true };
async componentDidMount() {
const response = await fetch(url);
const data = await response.json();
this.setState({ data, loading: false });
}
render() {
return <WrappedComponent {...this.props} {...this.state} />;
}
};
};
}通过这种方式，可以灵活地扩展组件功能而不污染原始组件代码，符合React的组合优于继承的设计原则。
