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 = (WrappedComponent, fetchData) => {return (props) => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const loadData = async () => {try {const result = await fetchData();setData(result);} catch (err) {setError(err.message);} finally {setLoading(false);}};loadData();}, []);if (loading) return <div>Loading...</div>;if (error) return <div>Error: {error}</div>;return <WrappedComponent {...props} data={data} />;};
};

4. 自定义 Hook (useFetch.js)

import { useState, useEffect } from 'react';export const useFetch = (url) => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {const response = await fetch(url);const result = await response.json();setData(result);} catch (err) {setError(err.message);} finally {setLoading(false);}};fetchData();}, [url]);return { data, loading, error };
};

5. 优化列表组件 (OptimizedList.jsx)

import React from 'react';const OptimizedList = React.memo(({ items, renderItem }) => {console.log('List re-rendered');return (<div style={{ maxHeight: '500px', overflow: 'auto' }}>{items.map((item, index) => (<div key={item.id || index}>{renderItem(item)}</div>))}</div>);
});export default OptimizedList;

6. 页面组件示例 (Admin.jsx)

import { withAuth } from '../components/WithAuth';
import { useFetch } from '../hooks/useFetch';
import OptimizedList from '../components/OptimizedList';const AdminPanel = ({ user }) => {const { data: posts, loading, error } = useFetch('/api/posts');if (loading) return <div>Loading posts...</div>;if (error) return <div>Error: {error}</div>;return (<div><h1>欢迎管理员 {user.name}</h1><h2>文章管理</h2><OptimizedListitems={posts}renderItem={(post) => (<div style={{ padding: '10px', borderBottom: '1px solid #ccc' }}><h3>{post.title}</h3><p>{post.content}</p></div>)}/></div>);
};// 使用高阶组件包裹，要求管理员权限
export default withAuth(AdminPanel, 'admin');

7. 主应用组件 (App.jsx)

// App.jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { UserProvider } from './contexts/UserContext';
import HomePage from './pages/HomePage';
import AdminPage from './pages/AdminPage';
import LoginPage from './pages/LoginPage';
import UserProfilePage from './pages/UserProfilePage';
import ArticleDetailPage from './pages/ArticleDetailPage';const App = () => {return (<UserProvider><Router><Switch><Route path="/" exact component={HomePage} /><Route path="/login" component={LoginPage} /><Route path="/profile" component={UserProfilePage} /><Route path="/admin" component={AdminPage} /><Route path="/articles/:id" component={ArticleDetailPage} /></Switch></Router></UserProvider>);
};export default App;

8. 登录页面示例 (Login.jsx)

import React, { useState, useContext } from 'react';
import { UserContext } from '../contexts/UserContext';const LoginPage = () => {const { login } = useContext(UserContext);const [username, setUsername] = useState('');const [password, setPassword] = useState('');const handleSubmit = (e) => {e.preventDefault();// 假设我们直接使用固定的用户名和密码登录if (username === 'admin' && password === 'admin123') {login({ username, role: 'admin' });} else {alert('Invalid credentials');}};return (<form onSubmit={handleSubmit}><input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" /><input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" /><button type="submit">Login</button></form>);
};export default LoginPage;

9. 文章详细页 (ArticleDetailPage.jsx)

展示文章的详细信息，点击文章标题进入。

// pages/ArticleDetailPage.jsx
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useFetch } from '../hooks/useFetch';const ArticleDetailPage = () => {const { id } = useParams();const { data: article, loading, error } = useFetch(`/api/articles/${id}`);if (loading) return <p>Loading...</p>;if (error) return <p>Error: {error.message}</p>;return (<div><h1>{article.title}</h1><p>{article.content}</p></div>);
};export default ArticleDetailPage;

10. 用户个人资料页 (UserProfilePage.jsx)

用户可以更新个人资料。

// pages/UserProfilePage.jsx
import React, { useState, useContext } from 'react';
import { UserContext } from '../contexts/UserContext';const UserProfilePage = () => {const { user, logout } = useContext(UserContext);const [username, setUsername] = useState(user.username);const handleSave = () => {// 在这里可以将更新后的用户名保存到后端console.log('Username updated:', username);};return (<div><h1>User Profile</h1><input type="text" value={username} onChange={(e) => setUsername(e.target.value)} /><button onClick={handleSave}>Save</button><button onClick={logout}>Logout</button></div>);
};export default UserProfilePage;

11. 分页功能 (HomePage.jsx)

文章列表实现分页功能，每页显示一定数量的文章。

// pages/HomePage.jsx
import React, { useState } from 'react';
import { useFetch } from '../hooks/useFetch';
import { ArticleList } from '../components/ArticleList';const HomePage = () => {const [page, setPage] = useState(1);const { data: articles, loading, error } = useFetch(`/api/articles?page=${page}`);if (loading) return <p>Loading...</p>;if (error) return <p>Error: {error.message}</p>;return (<div><ArticleList articles={articles} /><button onClick={() => setPage(page - 1)} disabled={page === 1}>Previous</button><button onClick={() => setPage(page + 1)}>Next</button></div>);
};export default HomePage;

11. 防抖(useDebouncedFetch.js)

用于处理防抖操作，避免频繁请求。

// hooks/useDebouncedFetch.js
import { useState, useEffect } from 'react';export const useDebouncedFetch = (url, delay) => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const timer = setTimeout(() => {const fetchData = async () => {try {const response = await fetch(url);const result = await response.json();setData(result);} catch (error) {setError(error);} finally {setLoading(false);}};fetchData();}, delay);return () => clearTimeout(timer);}, [url, delay]);return { data, loading, error };
};