使用 React 高级组件（HOC）实现的完整项目示例，包含权限控制、数据加载状态处理、性能优化等常见高级功能。创建一个简单的博客系统:
// 项目结构：
src/
|-- components/
| |-- ArticleList.jsx
| |-- Article.jsx
| |-- Header.jsx
| |-- LoginForm.jsx
| |-- UserProfile.jsx
| |-- WithLoading.jsx
| |-- AuthContext.jsx
| |-- WithAuth.jsx
|-- hocs/
| |-- withAuth.js
|-- hooks/
| |-- useFetch.js
| |-- useDebouncedFetch.js
|-- contexts/
| |-- UserContext.js
|-- pages/
| |-- HomePage.jsx
| |-- AdminPage.jsx
| |-- LoginPage.jsx
| |-- UserProfilePage.jsx
| |-- ArticleDetailPage.jsx
|-- App.jsx
|-- index.js// 首先安装必要依赖：react-router-dom
关键技术点：
1. 创建认证上下文 (AuthContext.jsx)
import { createContext, useContext, useState } from 'react';const AuthContext = createContext();export function AuthProvider({ children }) {const [user, setUser] = useState(null);const login = (userData) => {setUser({ ...userData, role: 'admin' }); // 模拟登录};const logout = () => {setUser(null);};return (<AuthContext.Provider value={{ user, login, logout }}>{children}</AuthContext.Provider>);
}export const useAuth = () => useContext(AuthContext);
2. 创建高阶组件 (WithAuth.jsx)
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';export const withAuth = (WrappedComponent, requiredRole = 'user') => {return (props) => {const { user } = useAuth();const navigate = useNavigate();if (!user) {navigate('/login');return null;}if (requiredRole === 'admin' && user.role !== 'admin') {return <div>无权限访问此页面</div>;}return <WrappedComponent {...props} user={user} />;};
};
3. 加载状态高阶组件 (WithLoading.jsx)
import { useState, useEffect } from 'react';export const withLoading = (WrappedCom
