在React中，高阶组件（Higher-Order Component，HOC）是一种用于重用组件逻辑的高级技术。HOC不是React API的一部分，而是一种基于React组合性质而形成的设计模式。
HOC接收一个组件作为输入，并返回一个新的组件作为输出。HOC还可以将props注入到被包装的组件中，从而增强其功能。
下面是一个使用HOC对组件进行封装的示例：
import React from 'react';
const withLoading = (WrappedComponent) => {
return class extends React.Component {
state = { isLoading: true };
componentDidMount() {
setTimeout(() => {
this.setState({ isLoading: false });
}, 1000);
}
render() {
const { isLoading } = this.state;
return isLoading ? <div>Loading...</div> : <WrappedComponent {...this.props} />;
}
};
};
const MyComponent = (props) => {
return <div>MyComponent</div>;
};
const MyComponentWithLoading = withLoading(MyComponent);
export default MyComponentWithLoading;在上述示例中，我们定义了一个名为withLoading的HOC，它接收一个被包装的组件作为输入，并返回一个新的包装组件。在包装组件中，我们添加了一个isLoading状态，并在componentDidMount生命周期方法中模拟了1秒的加载时间。最后，我们根据isLoading状态显示Loading或WrappedComponent。
最后，我们可以使用MyComponentWithLoading这个新组件来代替MyComponent。这个新组件会自动显示Loading状态，并在加载完成后显示MyComponent。