在React中，使用HOC（Higher-Order Component）可以实现逻辑复用。HOC是一个函数，接受一个组件作为参数并返回一个新的组件，这个新组件可以包装原始组件，提供一些额外的功能。
1. 创建一个函数，接受一个组件作为参数并返回一个新的组件。
2. 在新组件中，渲染传入的原始组件，并将需要复用的逻辑传递给原始组件。
3. 将新组件返回，并在需要使用逻辑复用的地方使用它。
下面是一个简单的例子，使用HOC实现组件的日志记录功能:
function withLogger(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log(`Component "${WrappedComponent.name}" has mounted.`);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
class MyComponent extends React.Component {
render() {
return <div>My Component</div>;
}
}
const MyComponentWithLogger = withLogger(MyComponent);
ReactDOM.render(<MyComponentWithLogger />, document.getElementById('root'));在这个例子中，我们创建了一个名为withLogger的HOC函数。它接受一个组件作为参数并返回一个新的组件，在新组件中，我们渲染传入的原始组件，并在componentDidMount()生命周期方法中记录日志。最后，我们将新组件返回，并在ReactDOM.render()方法中使用它。
通过这种方式，我们可以在需要日志记录功能的组件中使用withLogger()函数来增强组件，从而实现逻辑复用。