高阶函数（Higher-Order Component，HOC）是一种在React中用于重用组件逻辑的模式。它本质上是一个接收一个组件作为参数，并返回一个新的包装组件的函数。
以下是一个示例代码，演示了如何实现一个简单的高阶组件：
jsx
import React from "react";// 定义一个高阶组件函数
const withBackgroundColor = (WrappedComponent, color) => {// 返回一个新的包装组件return class extends React.Component {render() {// 在包装组件中添加额外的功能或逻辑return (<div style={{ backgroundColor: color }}><WrappedComponent {...this.props} /></div>);}};
};// 定义一个普通的组件
const MyComponent = (props) => {return <h1>Hello, {props.name}!</h1>;
};// 使用高阶组件包装普通组件
const WrappedComponent = withBackgroundColor(MyComponent, "lightblue");// 渲染最终的包装组件
ReactDOM.render(<WrappedComponent name="John" />, document.getElementById("root"));在上述代码中，我们定义了一个名为withBackgroundColor的高阶组件函数。它接收两个参数：WrappedComponent表示要被包装的普通组件，color表示要设置的背景颜色。
在高阶组件内部，我们返回一个匿名类组件，该组件会渲染一个带有指定背景颜色的div元素，并将传递给高阶组件的props传递给被包装的组件。
然后，我们定义了一个普通的组件MyComponent，它接收一个name属性并渲染相应的内容。
最后，我们通过调用withBackgroundColor函数并传递MyComponent和颜色参数来创建了一个包装组件WrappedComponent。最终，我们将WrappedComponent渲染到页面上。
这样，WrappedComponent就具有了额外的功能，即设置背景颜色，并将其传递给被包装的MyComponent组件。你可以根据需要更改高阶组件的实现，以添加其他的功能或逻辑。
