React 高级教程

使用 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