简述什么是React 高阶组件？
参考回答
高阶组件（Higher-Order Component, HOC）是 React 中的一种设计模式，用于在不修改原始组件的情况下，增强或共享组件的逻辑。它本质上是一个函数，接受一个组件作为参数，并返回一个新的组件。HOC 主要用于复用组件逻辑、状态管理等功能。
详细讲解与拓展
高阶组件的核心思想来自函数式编程中的高阶函数，即接受一个函数并返回另一个函数。在 React 中，高阶组件（HOC）通过将原始组件作为参数传递，返回一个增强后的新组件，增强后的组件具有原始组件的功能，同时还可能包含附加的功能或逻辑。
HOC 的基本结构：
const HOC = (WrappedComponent) => {
return class extends React.Component {
render() {
// 在这里可以添加逻辑，或者修改 props
return <WrappedComponent {...this.props} />;
}
}
}
举个例子：
假设你有一个组件 UserProfile，你希望给它添加身份验证功能，判断用户是否登录。如果用户未登录，则跳转到登录页。你可以通过 HOC 来增强 UserProfile 组件。
// 高阶组件：withAuth
const withAuth = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
if (!this.props.isLoggedIn) {
// 如果用户未登录，跳转到登录页面
this.props.history.push("/login");
}
}
render() {
// 如果用户已登录，渲染原组件
return this.props.isLoggedIn ? <WrappedComponent {...this.props} /> : null;
}
}
}
// 使用高阶组件增强 UserProfile
const UserProfileWithAuth = withAuth(UserProfile);
高阶组件的常见用途：
1. 代码复用：可以将共享的逻辑提取到高阶组件中，让多个组件共享。
2. 组件增强：通过高阶组件，可以在不修改原组件代码的情况下，增强原组件的功能，如添加权限验证、日志记录、网络请求等。
3. 注入 props：HOC 可以向目标组件注入额外的 props，从而动态改变其行为。
注意事项：
– 不修改原组件：HOC 会返回一个新组件，而不是修改原组件本身。这样可以保持原组件的纯粹性。
– Props 转发：HOC 在返回新的组件时，需要将原组件的 props 传递给新的组件，以确保原组件可以正常使用传递给它的属性。
总结：
高阶组件是 React 中非常强大的工具，可以帮助我们复用代码、增强组件功能，同时保持组件的可组合性和可维护性。通过理解高阶组件的原理，我们能够更好地应对复杂的组件逻辑。