面试题-React(十四)：什么是高阶组件（HOC）及其作用

一、高阶组件的概念

高阶组件（HOC）是一种函数，接受一个组件作为参数，并返回一个新的组件。这个新的组件具有一些增强的特性或功能。简而言之，高阶组件就是用来“包装”其他组件的函数。

二、高阶组件的作用

高阶组件在React开发中有多种作用，主要包括以下几点：

1. 代码复用：
高阶组件可以将通用的逻辑抽象出来，使多个组件共享同一段逻辑代码。这样可以减少重复编写相似代码的情况，提高代码的复用性。

2. 功能增强：
通过高阶组件，我们可以为组件添加额外的功能，如数据获取、认证、日志记录等。这种方式可以将核心功能与增强功能分开，使代码更加清晰。

3. 状态管理：
高阶组件可以帮助组件共享状态，比如将一些全局的状态传递给多个组件，从而实现状态的共享和管理。

4. 条件渲染：
高阶组件可以基于一些条件来控制组件的渲染，从而实现动态的组件呈现方式。

三、使用高阶组件的示例

以下是一个示例，展示了如何创建一个高阶组件来增强一个普通组件的功能。

// 高阶组件，用于向组件传递用户信息
const withUserInfo = (WrappedComponent) => {class WithUserInfo extends React.Component {render() {const userInfo = { username: 'John', role: 'admin' };return <WrappedComponent {...this.props} userInfo={userInfo} />;}}return WithUserInfo;
};// 普通组件
class UserProfile extends React.Component {render() {const { username, role } = this.props.userInfo;return (<div><h2>User Profile</h2><p>Username: {username}</p><p>Role: {role}</p></div>);}
}// 使用高阶组件增强普通组件
const EnhancedUserProfile = withUserInfo(UserProfile);// 在应用中使用增强后的组件
class App extends React.Component {render() {return (<div><h1>App</h1><EnhancedUserProfile /></div>);}
}