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