高阶组件

HOC：higerOrderComponent

是react中用于复用组件逻辑的一种高级技巧，他不是react API的一部分

他是一种基于react特性形成的设计模式

使用案例一：

// 路由守卫
import { getToken } from "@/utils"
import { Navigate } from "react-router-dom"
// 创建一个AuthRoute组件
function AuthRoute ({children}) {
  // 获取token
  const token = getToken()
  // 如果token存在，则渲染子组件
  if (token) {
    return <>{children}</>
  // 否则跳转到登录页面
  }else {
    return <Navigate to="/login" replace />
  }
}
​
// 导出AuthRoute组件
export default AuthRoute

const routes = createBrowserRouter([
  {
    path: '/',
    element: <AuthRoute><Layout /></AuthRoute>,
  },
  {
    path: '/login',
    element: <Login />,
  }
])

使用案例二：

const enhanceComponent = (Component) => {
  // 定义一个新的组件，名为 EnhancedComponent
  const EnhancedComponent = (props) => {
    // 组件的属性
    const newProps = {...props };
    // 这里可以添加或修改组件的属性
    newProps.title = ' Enhanced Component';

    // 调用原始组件，将新的属性传递给它
    return <Component {...newProps} />;
  };

  // 返回增强后的组件
  return EnhancedComponent;
};

// 使用增强后的组件
const MyComponent = (props) => {
  return <div>Hello, {props.name}</div>;
};

// 使用 enhanceComponent 函数增强 MyComponent 组件
const EnhancedMyComponent = enhanceComponent(MyComponent);

// 在 JSX 中使用增强后的组件
<EnhancedMyComponent name="John" />;

高阶组件可以用来做很多事情，例如：

• 状态管理：可以使用高阶组件来管理状态，并将状态传递给子组件。
• 路由：可以使用高阶组件来处理路由逻辑，并将路由信息传递给子组件。
• 数据获取：可以使用高阶组件来获取数据，并将数据传递给子组件。
• 样式：可以使用高阶组件来应用样式，并将样式传递给子组件。