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 };
};