第五章 UI 渲染与交互
React 的核心是构建用户界面，本章将深入探讨 React 的渲染机制、优化策略以及交互处理的最佳实践，帮助你构建高性能、响应式的用户界面。
5.1 React 渲染原理
5.1.1 Virtual DOM 与 Diff 算法
Virtual DOM 工作原理：
// 1. Virtual DOM 概念演示
const VirtualDOMExample = () => {// React Element 对象（Virtual DOM）const virtualElement = React.createElement('div',{ className: 'container', id: 'main' },React.createElement('h1', null, 'Hello Virtual DOM'),React.createElement('p', null, 'This is a virtual representation'));// 等价的 JSXconst jsxElement = (<div className="container" id="main"><h1>Hello Virtual DOM</h1><p>This is a virtual representation</p></div>);// 2. Diff 算法演示const [count, setCount] = React.useState(0);const [items, setItems] = React.useState(['Apple', 'Banana']);// Diff 算法如何工作：// - 类型不同：销毁旧节点，创建新节点// - 类型相同：比较 props，更新变化// - 列表子元素：通过 key 进行标识和重排const addItem = () => {// ✅ 好的做法：使用 key 进行高效 diffsetItems(prev => [...prev, `Item ${prev.length + 1}`]);};const shuffleItems = () => {// ✅ 好的做法：保持 key 稳定setItems(prev => {const shuffled = [...prev].sort(() => Math.random() - 0.5);return shuffled;});};// ❌ 不好的做法：没有使用 keyconst BadList = ({ items }) => (<ul>{items.map(item => (<li>{item}</li> // 缺少 key，React 无法有效识别元素))}</ul>);// ✅ 好的做法：使用稳定的 keyconst GoodList = ({ items }) => (<ul>{items.map((item, index) => (<li key={item.id || item}>{item}</li> // 使用稳定的唯一标识))}</ul>);return (<div className="virtual-dom-demo"><h2>Virtual DOM & Diff Algorithm Demo</h2><div className="counter-demo"><p>Count: {count}</p><button onClick={() => setCount(prev => prev + 1)}>Increment</button><button onClick={() => setCount(prev => prev + 1)}>Increment</button><button onClick={() => setCount(prev => prev + 1)}>Increment</button><p>React 会批量更新这三个 setState 调用，只触发一次重新渲染。</p></div><div className="list-demo"><h3>List Rendering with Keys</h3><button onClick={addItem}>Add Item</button><button onClick={shuffleItems}>Shuffle Items</button><GoodList items={items} /><div className="key-explanation"><h4>Key Importance:</h4><ul><li>Key 帮助 React 识别哪些元素发生了变化</li><li>稳定的 key 确保 DOM 节点被重用而非重建</li><li>避免使用数组索引作为 key（除非列表是静态的）</li></ul></div></div></div>);
};// 3. 渲染流程演示
const RenderingFlowDemo = () => {const [user, setUser] = React.useState(null);const [posts, setPosts] = React.useState([]);const [loading, setLoading] = React.useState(false);React.useEffect(() => {console.log('1. Component rendered or updated');});React.useEffect(() => {console.log('2. User state changed:', user);}, [user]);React.useEffect(() => {console.log('3. Posts state changed:', posts);}, [posts]);const fetchUserData = async () => {setLoading(true);console.log('4. Fetch started');// 模拟 API 调用await new Promise(resolve => setTimeout(resolve, 1000));// 批量更新状态React.startTransition(() => {setUser({ id: 1, name: 'John Doe' });setPosts([{ id: 1, title: 'Hello React' }]);setLoading(false);});console.log('5. Batch state updates triggered');};const renderCount = React.useRef(0);renderCount.current++;console.log(`Component rendered ${renderCount.current} times`);return (<div className="rendering-flow-demo"><h2>Rendering Flow Demo</h2><button onClick={fetchUserData} disabled={loading}>{loading ? 'Loading...' : 'Fetch User Data'}</button>{loading && <p>Loading user data...</p>}{user && (<div className="user-info"><h3>User: {user.name}</h3></div>)}{posts.length > 0 && (<div className="posts"><h3>Posts:</h3>{posts.map(post => (<div key={post.id}>{post.title}</div>))}</div>)}<div className="render-info"><p>Render Count: {renderCount.current}</p><p>Check console for rendering flow logs</p></div></div>);
};
5.1.2 渲染性能优化
组件渲染优化：
import React, { memo, useMemo, useCallback, useState, useRef } from 'react';// 1. React.memo 防止不必要的重新渲染
const ExpensiveComponent = memo(({ data, onAction, style
}) => {// 只有当 props 发生实际变化时才重新渲染console.log('ExpensiveComponent rendered');const expensiveCalculation = useMemo(() => {console.log('Performing expensive calculation...');// 模拟昂贵计算return data.reduce((sum, item) => sum + item.value * item.multiplier, 0);}, [data]);return (<div style={style} className="expensive-component"><h3>Expensive Calculation Result: {expensiveCalculation}</h3><button onClick={() => onAction('calculate')}>Recalculate</button></div>);
}, (prevProps, nextProps) => {// 自定义比较函数const propsEqual = JSON.stringify(prevProps.data) === JSON.stringify(nextProps.data) &&prevProps.style === nextProps.style;console.log('Props comparison result:', propsEqual);return propsEqual;
});// 2. useMemo 缓存计算结果
const CalculationDemo = () => {const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);const [multiplier, setMultiplier] = useState(2);const [unrelatedState, setUnrelatedState] = useState(0);// ❌ 不好的做法：每次渲染都重新计算// const sum = numbers.reduce((acc, num) => acc + num * multiplier, 0);// ✅ 好的做法：使用 useMemo 缓存计算结果const sum = useMemo(() => {console.log('Calculating sum...');return numbers.reduce((acc, num) => acc + num * multiplier, 0);}, [numbers, multiplier]);const sortedNumbers = useMemo(() => {console.log('Sorting numbers...');return [...numbers].sort((a, b) => a - b);}, [numbers]);const expensiveData = useMemo(() => {console.log('Generating expensive data...');return Array.from({ length: 1000 }, (_, i) => ({id: i,value: Math.random() * 100,processed: Math.sin(i) * Math.cos(i)}));}, []); // 空依赖数组，只在首次渲染时计算return (<div className="calculation-demo"><h3>Calculation Demo</h3><div className="controls"><button onClick={() => setNumbers([...numbers, numbers.length + 1])}>Add Number</button><button onClick={() => setMultiplier(multiplier + 1)}>Multiplier: {multiplier}</button><button onClick={() => setUnrelatedState(unrelatedState + 1)}>Unrelated State: {unrelatedState}</button></div><div className="results"><p>Numbers: {numbers.join(', ')}</p><p>Sum: {sum}</p><p>Sorted: {sortedNumbers.join(', ')}</p><p>Expensive data length: {expensiveData.length}</p></div><ExpensiveComponent data={expensiveData.slice(0, 10)} onAction={(action) => console.log('Action:', action)}style={{ backgroundColor: '#f0f0f0' }}/></div>);
};// 3. useCallback 缓存函数引用
const CallbackDemo = () => {const [count, setCount] = useState(0);const [list, setList] = useState(['Apple', 'Banana', 'Orange']);// ❌ 不好的做法：每次渲染都创建新函数// const addItem = () => setList(prev => [...prev, `Item ${prev.length + 1}`]);// const increment = () => setCount(prev => prev + 1);// ✅ 好的做法：使用 useCallback 缓存函数const addItem = useCallback(() => {setList(prev => [...prev, `Item ${prev.length + 1}`]);}, []); // 空依赖数组，函数引用稳定const increment = useCallback(() => {setCount(prev => prev + 1);}, []); // 空依赖数组，函数引用稳定const removeItem = useCallback((index) => {setList(prev => prev.filter((_, i) => i !== index));}, []); // 空依赖数组，函数引用稳定const clearList = useCallback(() => {setList([]);}, []); // 空依赖数组，函数引用稳定return (<div className="callback-demo"><h3>Callback Demo</h3><div className="counter"><p>Count: {count}</p><button onClick={increment}>Increment</button></div><div className="list-manager"><p>List Items: {list.length}</p><button onClick={addItem}>Add Item</button><button onClick={clearList}>Clear List</button><ChildList items={list}onRemove={removeItem}/></div></div>);
};// 子组件 - 使用 memo 优化
const ChildList = memo(({ items, onRemove }) => {console.log('ChildList rendered');return (<ul className="child-list">{items.map((item, index) => (<li key={`${item}-${index}`}>{item}<button onClick={() => onRemove(index)}>Remove</button></li>))}</ul>);
});// 4. 状态提升优化
const StateLiftingDemo = () => {const [sharedState, setSharedState] = useState({filter: 'all',sortBy: 'name',viewMode: 'grid'});const [data, setData] = useState([{ id: 1, name: 'Item 1', category: 'A' },{ id: 2, name: 'Item 2', category: 'B' },{ id: 3, name: 'Item 3', category: 'A' },{ id: 4, name: 'Item 4', category: 'C' }]);// 将共享状态管理提升到父组件const updateSharedState = useCallback((updates) => {setSharedState(prev => ({ ...prev, ...updates }));}, []);// 计算派生状态const filteredAndSortedData = useMemo(() => {let result = [...data];// 过滤if (sharedState.filter !== 'all') {result = result.filter(item => item.category === sharedState.filter);}// 排序result.sort((a, b) => {switch (sharedState.sortBy) {case 'name': return a.name.localeCompare(b.name);case 'category': return a.category.localeCompare(b.category);default: return 0;}});return result;}, [data, sharedState.filter, sharedState.sortBy]);return (<div className="state-lifting-demo"><h3>State Lifting Demo</h3><ControlPanel sharedState={sharedState}onUpdate={updateSharedState}/><DataDisplay data={filteredAndSortedData}viewMode={sharedState.viewMode}/></div>);
};const ControlPanel = memo(({ sharedState, onUpdate }) => {console.log('ControlPanel rendered');return (<div className="control-panel"><h4>Controls</h4><div className="control-group"><label>Filter:</label><select value={sharedState.filter}onChange={(e) => onUpdate({ filter: e.target.value })}><option value="all">All</option><option value="A">Category A</option><option value="B">Category B</option><option value="C">Category C</option></select></div><div className="control-group"><label>Sort By:</label><select value={sharedState.sortBy}onChange={(e) => onUpdate({ sortBy: e.target.value })}><option value="name">Name</option><option value="category">Category</option></select></div><div className="control-group"><label>View Mode:</label><button className={sharedState.viewMode === 'grid' ? 'active' : ''}onClick={() => onUpdate({ viewMode: 'grid' })}>Grid</button><button className={sharedState.viewMode === 'list' ? 'active' : ''}onClick={() => onUpdate({ viewMode: 'list' })}>List</button></div></div>);
});const DataDisplay = memo(({ data, viewMode }) => {console.log('DataDisplay rendered');if (viewMode === 'grid') {return (<div className="data-grid">{data.map(item => (<div key={item.id} className="data-item"><h4>{item.name}</h4><p>{item.category}</p></div>))}</div>);}return (<div className="data-list">{data.map(item => (<div key={item.id} className="list-item"><strong>{item.name}</strong> - {item.category}</div>))}</div>);
});
5.2 条件渲染与列表渲染
5.2.1 高级条件渲染模式
多层级条件渲染优化：
import React, { useState, useMemo } from 'react';// 1. 多条件渲染决策树
const AdvancedConditionalRendering = () => {const [user, setUser] = useState({isAuthenticated: false,role: 'guest',permissions: [],subscription: null});const [loading, setLoading] = useState(false);const [error, setError] = useState(null);// 使用 useMemo 缓存复杂的条件逻辑const componentConfig = useMemo(() => {const config = {showDashboard: false,showAdminPanel: false,showPremiumFeatures: false,showLoginPrompt: false,showErrorMessage: false,userRole: 'guest',accessLevel: 0};// 访问控制逻辑if (error) {config.showErrorMessage = true;return config;}if (loading) {config.showLoadingState = true;return config;}if (!user.isAuthenticated) {config.showLoginPrompt = true;config.userRole = 'guest';config.accessLevel = 0;return config;}// 认证用户的权限判断config.userRole = user.role;switch (user.role) {case 'admin':config.showDashboard = true;config.showAdminPanel = true;config.accessLevel = 100;break;case 'moderator':config.showDashboard = true;config.accessLevel = 70;break;case 'premium':config.showDashboard = true;config.showPremiumFeatures = true;config.accessLevel = 50;break;case 'user':config.showDashboard = true;config.accessLevel = 30;break;default:config.accessLevel = 10;}// 订阅状态判断if (user.subscription === 'premium') {config.showPremiumFeatures = true;}return config;}, [user, loading, error]);return (<div className="conditional-rendering-demo"><h2>Advanced Conditional Rendering</h2>{/* 控制面板 */}<ControlPanel user={user} setUser={setUser}setLoading={setLoading}setError={setError}/>{/* 基于配置的条件渲染 */}{componentConfig.showLoadingState && <LoadingSpinner />}{componentConfig.showErrorMessage && (<ErrorMessage error={error} onDismiss={() => setError(null)} />)}{componentConfig.showLoginPrompt && <LoginPrompt />}{componentConfig.showDashboard && (<Dashboard accessLevel={componentConfig.accessLevel}showAdminPanel={componentConfig.showAdminPanel}showPremiumFeatures={componentConfig.showPremiumFeatures}/>)}</div>);
};// 2. 渲染组件库
const LoadingSpinner = () => (<div className="loading-spinner"><div className="spinner"></div><p>Loading...</p></div>
);const ErrorMessage = ({ error, onDismiss }) => (<div className="error-message"><h3>Error</h3><p>{error}</p><button onClick={onDismiss}>Dismiss</button></div>
);const LoginPrompt = () => (<div className="login-prompt"><h2>Welcome, Guest!</h2><p>Please log in to access the full features.</p><button onClick={() => {// 模拟登录}}>Login</button></div>
);const Dashboard = ({ accessLevel, showAdminPanel, showPremiumFeatures }) => (<div className="dashboard"><h2>Dashboard</h2><p>Access Level: {accessLevel}</p><BasicFeatures />{showPremiumFeatures && <PremiumFeatures />}{showAdminPanel && <AdminPanel />}</div>
);const BasicFeatures = () => (<div className="features"><h3>Basic Features</h3><div className="feature-grid"><FeatureCard title="Profile" description="View and edit your profile" /><FeatureCard title="Settings" description="Manage your account settings" /><FeatureCard title="Help" description="Get help and support" /></div></div>
);const PremiumFeatures = () => (<div className="premium-features"><h3>Premium Features</h3><div className="feature-grid"><FeatureCard title="Advanced Analytics" description="Deep insights into your data" /><FeatureCard title="Priority Support" description="Get help faster" /><FeatureCard title="Custom Themes" description="Personalize your experience" /></div></div>
);const AdminPanel = () => (<div className="admin-panel"><h3>Admin Panel</h3><div className="admin-tools"><AdminTool title="User Management" icon="👥" /><AdminTool title="System Settings" icon="⚙️" /><AdminTool title="Analytics" icon="📊" /><AdminTool title="Security" icon="🔒" /></div></div>
);const FeatureCard = ({ title, description }) => (<div className="feature-card"><h4>{title}</h4><p>{description}</p></div>
);const AdminTool = ({ title, icon }) => (<div className="admin-tool"><span className="tool-icon">{icon}</span><span className="tool-title">{title}</span></div>
);const ControlPanel = ({ user, setUser, setLoading, setError }) => {const scenarios = {guest: { isAuthenticated: false, role: 'guest' },basicUser: { isAuthenticated: true, role: 'user', permissions: ['read'],subscription: null },premiumUser: { isAuthenticated: true, role: 'premium', permissions: ['read', 'write'],subscription: 'premium' },moderator: { isAuthenticated: true, role: 'moderator', permissions: ['read', 'write', 'moderate'],subscription: 'premium' },admin: { isAuthenticated: true, role: 'admin', permissions: ['read', 'write', 'moderate', 'admin'],subscription: 'premium' }};const simulateScenario = (scenarioName) => {setUser(scenarios[scenarioName]);};return (<div className="control-panel"><h3>User Simulation</h3><div className="scenario-buttons">{Object.keys(scenarios).map(scenario => (<button key={scenario}onClick={() => simulateScenario(scenario)}className={user.role === scenarios[scenario].role ? 'active' : ''}>{scenario.charAt(0).toUpperCase() + scenario.slice(1)}</button>))}</div><div className="state-controls"><button onClick={() => setLoading(!loading)}>Toggle Loading</button><button onClick={() => setError('Network connection failed')}>Simulate Error</button></div><div className="current-state"><p>Current Role: {user.role}</p><p>Authenticated: {user.isAuthenticated ? 'Yes' : 'No'}</p><p>Permissions: {user.permissions.join(', ') || 'None'}</p><p>Subscription: {user.subscription || 'None'}</p></div></div>);
};
5.2.2 高性能列表渲染
虚拟滚动与分页策略：
import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';// 1. 虚拟滚动实现
const VirtualizedList = ({ items, itemHeight = 50, containerHeight = 400,renderItem,bufferSize = 5
}) => {const [scrollTop, setScrollTop] = useState(0);const containerRef = useRef(null);// 计算可见范围const visibleRange = useMemo(() => {const start = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferSize);const visibleCount = Math.ceil(containerHeight / itemHeight);const end = Math.min(items.length, start + visibleCount + bufferSize * 2);return { start, end };}, [scrollTop, itemHeight, containerHeight, items.length, bufferSize]);// 可见项const visibleItems = useMemo(() => {return items.slice(visibleRange.start, visibleRange.end).map((item, index) => ({item,index: visibleRange.start + index}));}, [items, visibleRange]);const handleScroll = useCallback((e) => {setScrollTop(e.target.scrollTop);}, []);// 容器样式const containerStyle = {height: containerHeight,overflow: 'auto',position: 'relative'};// 内容容器样式const contentStyle = {height: items.length * itemHeight,position: 'relative'};// 项目容器样式const itemContainerStyle = {position: 'absolute',top: visibleRange.start * itemHeight,left: 0,right: 0};return (<div ref={containerRef}style={containerStyle}onScroll={handleScroll}className="virtualized-list"><div style={contentStyle}><div style={itemContainerStyle}>{visibleItems.map(({ item, index }) => (<divkey={item.id || index}style={{height: itemHeight,borderBottom: '1px solid #eee'}}>{renderItem(item, index)}</div>))}</div></div>{/* 滚动指示器 */}<div className="scroll-indicator">Showing {visibleRange.end - visibleRange.start} of {items.length} items</div></div>);
};// 2. 分页组件
const PaginatedList = ({ items, itemsPerPage = 20,renderItem,maxPageButtons = 5
}) => {const [currentPage, setCurrentPage] = useState(1);const totalPages = Math.ceil(items.length / itemsPerPage);const paginatedItems = useMemo(() => {const startIndex = (currentPage - 1) * itemsPerPage;const endIndex = startIndex + itemsPerPage;return items.slice(startIndex, endIndex);}, [items, currentPage, itemsPerPage]);const goToPage = useCallback((page) => {if (page >= 1 && page <= totalPages) {setCurrentPage(page);}}, [totalPages]);const goToPreviousPage = useCallback(() => {goToPage(currentPage - 1);}, [currentPage, goToPage]);const goToNextPage = useCallback(() => {goToPage(currentPage + 1);}, [currentPage, goToPage]);const pageNumbers = useMemo(() => {const pages = [];const halfMax = Math.floor(maxPageButtons / 2);let startPage = Math.max(1, currentPage - halfMax);let endPage = Math.min(totalPages, startPage + maxPageButtons - 1);if (endPage - startPage < maxPageButtons - 1) {startPage = Math.max(1, endPage - maxPageButtons + 1);}for (let i = startPage; i <= endPage; i++) {pages.push(i);}return pages;}, [currentPage, totalPages, maxPageButtons]);return (<div className="paginated-list"><div className="list-content">{paginatedItems.map((item, index) => renderItem(item, (currentPage - 1) * itemsPerPage + index))}</div>{totalPages > 1 && (<div className="pagination"><button onClick={goToPreviousPage}disabled={currentPage === 1}>Previous</button>{pageNumbers[0] > 1 && (<><button onClick={() => goToPage(1)}>1</button>{pageNumbers[0] > 2 && <span className="ellipsis">...</span>}</>)}{pageNumbers.map(page => (<buttonkey={page}onClick={() => goToPage(page)}className={page === currentPage ? 'active' : ''}>{page}</button>))}{pageNumbers[pageNumbers.length - 1] < totalPages && (<>{pageNumbers[pageNumbers.length - 1] < totalPages - 1 && (<span className="ellipsis">...</span>)}<button onClick={() => goToPage(totalPages)}>{totalPages}</button></>)}<button onClick={goToNextPage}disabled={currentPage === totalPages}>Next</button></div>)}<div className="page-info">Page {currentPage} of {totalPages} | {items.length} total items</div></div>);
};// 3. 无限滚动组件
const InfiniteScrollList = ({ items, renderItem,onLoadMore,hasMore = true,loading = false,threshold = 100
}) => {const observerRef = useRef();const lastItemRef = useRef(null);useEffect(() => {const observer = new IntersectionObserver((entries) => {const target = entries[0];if (target.isIntersecting && hasMore && !loading) {onLoadMore();}},{threshold: 0.1,rootMargin: `${threshold}px`});if (lastItemRef.current) {observer.observe(lastItemRef.current);}observerRef.current = observer;return () => {if (observerRef.current) {observerRef.current.disconnect();}};}, [hasMore, loading, onLoadMore, threshold]);return (<div className="infinite-scroll-list">{items.map((item, index) => {const isLast = index === items.length - 1;return (<divkey={item.id || index}ref={isLast ? lastItemRef : null}className="list-item">{renderItem(item, index)}</div>);})}{loading && (<div className="loading-indicator"><div className="spinner"></div><p>Loading more items...</p></div>)}{!hasMore && items.length > 0 && (<div className="end-indicator"><p>No more items to load</p></div>)}</div>);
};// 4. 搜索和过滤列表
const FilteredList = ({ items, renderItem,searchFields = ['name'],filterOptions = {}
}) => {const [searchTerm, setSearchTerm] = useState('');const [filters, setFilters] = useState({});const [sortBy, setSortBy] = useState('name');const [sortOrder, setSortOrder] = useState('asc');const filteredAndSortedItems = useMemo(() => {let filtered = items;// 搜索过滤if (searchTerm) {filtered = filtered.filter(item =>searchFields.some(field => {const value = item[field];return value && typeof value === 'string' && value.toLowerCase().includes(searchTerm.toLowerCase());}));}// 条件过滤Object.entries(filters).forEach(([key, value]) => {if (value && value !== 'all') {filtered = filtered.filter(item => item[key] === value);}});// 排序filtered.sort((a, b) => {let aVal = a[sortBy];let bVal = b[sortBy];if (typeof aVal === 'string') {aVal = aVal.toLowerCase();bVal = bVal.toLowerCase();}const comparison = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;return sortOrder === 'asc' ? comparison : -comparison;});return filtered;}, [items, searchTerm, filters, sortBy, sortOrder, searchFields]);const handleFilterChange = useCallback((filterKey, value) => {setFilters(prev => ({...prev,[filterKey]: value}));}, []);const handleSort = useCallback((field) => {if (sortBy === field) {setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');} else {setSortBy(field);setSortOrder('asc');}}, [sortBy]);return (<div className="filtered-list">{/* 搜索栏 */}<div className="search-bar"><inputtype="text"placeholder="Search..."value={searchTerm}onChange={(e) => setSearchTerm(e.target.value)}className="search-input"/>{searchTerm && (<button onClick={() => setSearchTerm('')}className="clear-search">Clear</button>)}</div>{/* 过滤器 */}<div className="filters">{Object.entries(filterOptions).map(([key, options]) => (<div key={key} className="filter-group"><label>{key}:</label><selectvalue={filters[key] || 'all'}onChange={(e) => handleFilterChange(key, e.target.value)}><option value="all">All</option>{options.map(option => (<option key={option} value={option}>{option}</option>))}</select></div>))}</div>{/* 排序 */}<div className="sort-controls">{Object.keys(items[0] || {}).map(field => (<buttonkey={field}onClick={() => handleSort(field)}className={sortBy === field ? 'active' : ''}>{field}{sortBy === field && (<span>{sortOrder === 'asc' ? '↑' : '↓'}</span>)}</button>))}</div>{/* 结果统计 */}<div className="results-info">Showing {filteredAndSortedItems.length} of {items.length} items</div>{/* 列表内容 */}<div className="list-content">{filteredAndSortedItems.map((item, index) => renderItem(item, index))}</div></div>);
};// 5. 使用示例和演示
const ListRenderingDemo = () => {// 生成大量测试数据const [data, setData] = useState(() => Array.from({ length: 10000 }, (_, i) => ({id: i + 1,name: `Item ${i + 1}`,category: ['A', 'B', 'C', 'D'][Math.floor(Math.random() * 4)],value: Math.floor(Math.random() * 100),date: new Date(Date.now() - Math.random() * 10000000000).toISOString(),status: ['active', 'inactive', 'pending'][Math.floor(Math.random() * 3)]})));const [renderingMode, setRenderingMode] = useState('virtual');const [isLoading, setIsLoading] = useState(false);const [hasMore, setHasMore] = useState(true);const renderItem = useCallback((item, index) => (<div className="item-card"><div className="item-header"><h4>{item.name}</h4><span className={`status ${item.status}`}>{item.status}</span></div><div className="item-details"><p>Category: {item.category}</p><p>Value: {item.value}</p><p>Date: {new Date(item.date).toLocaleDateString()}</p></div></div>), []);const handleLoadMore = useCallback(() => {if (isLoading || !hasMore) return;setIsLoading(true);// 模拟异步加载setTimeout(() => {setData(prev => {const newItems = Array.from({ length: 50 }, (_, i) => ({id: prev.length + i + 1,name: `Item ${prev.length + i + 1}`,category: ['A', 'B', 'C', 'D'][Math.floor(Math.random() * 4)],value: Math.floor(Math.random() * 100),date: new Date().toISOString(),status: ['active', 'inactive', 'pending'][Math.floor(Math.random() * 3)]}));if (prev.length + 50 > 20000) {setHasMore(false);}return [...prev, ...newItems];});setIsLoading(false);}, 1000);}, [isLoading, hasMore]);const categories = useMemo(() => [...new Set(data.map(item => item.category))],[data]);const statuses = useMemo(() => [...new Set(data.map(item => item.status))],[data]);return (<div className="list-rendering-demo"><h2>Advanced List Rendering Demo</h2><div className="mode-selector"><label>Rendering Mode:</label><select value={renderingMode} onChange={(e) => setRenderingMode(e.target.value)}><option value="virtual">Virtual Scrolling</option><option value="paginated">Pagination</option><option value="infinite">Infinite Scroll</option><option value="filtered">Filtered List</option></select></div><div className="rendering-container">{renderingMode === 'virtual' && (<VirtualizedListitems={data}itemHeight={120}containerHeight={500}renderItem={renderItem}/>)}{renderingMode === 'paginated' && (<PaginatedListitems={data}itemsPerPage={20}renderItem={renderItem}/>)}{renderingMode === 'infinite' && (<InfiniteScrollListitems={data.slice(0, 500)} // 限制初始显示数量renderItem={renderItem}onLoadMore={handleLoadMore}hasMore={hasMore}loading={isLoading}/>)}{renderingMode === 'filtered' && (<FilteredListitems={data}renderItem={renderItem}searchFields={['name', 'category']}filterOptions={{category: categories,status: statuses}}/>)}</div><div className="performance-info"><p>Total Items: {data.length}</p><p>Current Mode: {renderingMode}</p></div></div>);
};
通过这些渲染优化技术，你可以构建出高性能、流畅的用户界面，即使处理大量数据也能保持良好的用户体验。
5.3 事件处理与用户交互
5.3.1 高级事件处理模式
事件委托与优化：
import React, { useState, useCallback, useRef, useEffect } from 'react';// 1. 事件委托实现
const EventDelegationDemo = () => {const [selectedItem, setSelectedItem] = useState(null);const [actions, setActions] = useState([]);const containerRef = useRef(null);const handleClick = useCallback((e) => {// 使用事件委托处理子元素点击const target = e.target;if (target.matches('.item-card')) {const itemId = target.dataset.itemId;setSelectedItem(itemId);setActions(prev => [...prev, `Clicked item ${itemId}`]);} else if (target.matches('.action-button')) {const action = target.dataset.action;setActions(prev => [...prev, `Action: ${action}`]);}}, []);useEffect(() => {const container = containerRef.current;if (container) {container.addEventListener('click', handleClick);return () => {container.removeEventListener('click', handleClick);};}}, [handleClick]);const items = Array.from({ length: 100 }, (_, i) => ({id: i + 1,name: `Item ${i + 1}`,value: Math.random() * 100}));return (<div className="event-delegation-demo"><h2>Event Delegation Demo</h2><div className="actions-log"><h4>Actions Log:</h4>{actions.slice(-5).map((action, index) => (<div key={index}>{action}</div>))}</div><div ref={containerRef}className="items-container">{items.map(item => (<divkey={item.id}data-item-id={item.id}className="item-card"><h4>{item.name}</h4><p>Value: {item.value.toFixed(2)}</p><div className="item-actions"><button data-action={`edit-${item.id}`}className="action-button">Edit</button><button data-action={`delete-${item.id}`}className="action-button">Delete</button></div></div>))}</div>{selectedItem && (<div className="selected-info">Selected Item: {selectedItem}<button onClick={() => setSelectedItem(null)}>Clear Selection</button></div>)}</div>);
};// 2. 防抖与节流事件
const DebounceThrottleDemo = () => {const [searchTerm, setSearchTerm] = useState('');const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');const [throttledValue, setThrottledValue] = useState(0);const [immediateValue, setImmediateValue] = useState(0);const [searchResults, setSearchResults] = useState([]);const [requestCount, setRequestCount] = useState(0);// 防抖 Hookconst useDebounce = (value, delay) => {const [debouncedValue, setDebouncedValue] = useState(value);useEffect(() => {const handler = setTimeout(() => {setDebouncedValue(value);}, delay);return () => {clearTimeout(handler);};}, [value, delay]);return debouncedValue;};// 节流 Hookconst useThrottle = (value, delay) => {const [throttledValue, setThrottledValue] = useState(value);const lastExecuted = useRef(Date.now());useEffect(() => {const handler = setTimeout(() => {if (Date.now() - lastExecuted.current >= delay) {setThrottledValue(value);lastExecuted.current = Date.now();}}, delay - (Date.now() - lastExecuted.current));return () => {clearTimeout(handler);};}, [value, delay]);return throttledValue;};// 搜索 API 模拟const searchAPI = useCallback(async (term) => {if (!term.trim()) {setSearchResults([]);return;}setRequestCount(prev => prev + 1);// 模拟 API 延迟await new Promise(resolve => setTimeout(resolve, 500));const mockResults = Array.from({ length: 5 }, (_, i) => ({id: Date.now() + i,title: `${term} Result ${i + 1}`,description: `Description for ${term} result ${i + 1}`}));setSearchResults(mockResults);}, []);const debouncedTerm = useDebounce(searchTerm, 500);useEffect(() => {searchAPI(debouncedTerm);}, [debouncedTerm, searchAPI]);const handleMouseMove = useCallback((e) => {setImmediateValue(e.clientX);}, []);const throttledMouseMove = useThrottle(handleMouseMove, 100);const handleScroll = useCallback(() => {setThrottledValue(window.scrollY);}, []);useEffect(() => {window.addEventListener('scroll', handleScroll);return () => window.removeEventListener('scroll', handleScroll);}, [handleScroll]);return (<div className="debounce-throttle-demo"><h2>Debounce & Throttle Demo</h2><div className="demo-section"><h3>Debounced Search</h3><inputtype="text"placeholder="Search (debounced by 500ms)"value={searchTerm}onChange={(e) => setSearchTerm(e.target.value)}/><p>Current: {searchTerm}</p><p>Debounced: {debouncedTerm}</p><p>API Requests: {requestCount}</p>{searchResults.length > 0 && (<div className="search-results">{searchResults.map(result => (<div key={result.id} className="result-item"><h4>{result.title}</h4><p>{result.description}</p></div>))}</div>)}</div><div className="demo-section"><h3>Throttled Scroll</h3><p>Scroll the page to see throttled values</p><p>Throttled Scroll Y: {throttledValue}</p><p>Immediate Mouse X: <span onMouseMove={throttledMouseMove}className="mouse-tracker">Move mouse here</span> {immediateValue}</p></div><div className="demo-section"><h3>Performance Comparison</h3><div className="comparison"><div className="comparison-item"><h4>Without Optimization</h4><input onChange={(e) => searchAPI(e.target.value)}placeholder="Immediate search"/></div><div className="comparison-item"><h4>With Debounce</h4><inputvalue={searchTerm}onChange={(e) => setSearchTerm(e.target.value)}placeholder="Debounced search"/></div></div></div></div>);
};// 3. 复合事件处理
const ComplexInteractionDemo = () => {const [gesture, setGesture] = useState({type: null,startX: 0,startY: 0,currentX: 0,currentY: 0,distance: 0,duration: 0,velocity: 0});const [isDragging, setIsDragging] = useState(false);const [isLongPress, setIsLongPress] = useState(false);const [taps, setTaps] = useState([]);const [pinchDistance, setPinchDistance] = useState(0);const longPressTimer = useRef(null);const dragStartPos = useRef({ x: 0, y: 0 });const dragStartTime = useRef(0);const handleMouseDown = useCallback((e) => {const { clientX, clientY } = e.touches ? e.touches[0] : e;dragStartPos.current = { x: clientX, y: clientY };dragStartTime.current = Date.now();setIsDragging(true);// 长按检测longPressTimer.current = setTimeout(() => {setIsLongPress(true);setGesture(prev => ({...prev,type: 'longpress',startX: clientX,startY: clientY,duration: 500}));}, 500);}, []);const handleMouseMove = useCallback((e) => {if (!isDragging) return;const { clientX, clientY } = e.touches ? e.touches[0] : e;const deltaX = clientX - dragStartPos.current.x;const deltaY = clientY - dragStartPos.current.y;const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);// 如果移动距离超过阈值，取消长按if (distance > 10 && longPressTimer.current) {clearTimeout(longPressTimer.current);setIsLongPress(false);}setGesture(prev => ({...prev,type: 'drag',currentX: clientX,currentY: clientY,distance,duration: Date.now() - dragStartTime.current,velocity: distance / (Date.now() - dragStartTime.current) * 1000}));}, [isDragging]);const handleMouseUp = useCallback((e) => {if (!isDragging) return;const { clientX, clientY } = e.changedTouches ? e.changedTouches[0] : e;const deltaX = clientX - dragStartPos.current.x;const deltaY = clientY - dragStartPos.current.y;const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);const duration = Date.now() - dragStartTime.current;// 清除长按定时器if (longPressTimer.current) {clearTimeout(longPressTimer.current);}// 判断手势类型let gestureType = 'tap';if (isLongPress) {gestureType = 'longpress';} else if (duration < 200 && distance < 10) {gestureType = 'tap';const now = Date.now();setTaps(prev => [...prev.slice(-2), now]);// 检测双击if (taps.length >= 2 && now - taps[taps.length - 2] < 300) {gestureType = 'doubletap';}} else if (distance > 50 && duration < 500) {gestureType = 'swipe';} else {gestureType = 'drag';}setGesture({type: gestureType,startX: dragStartPos.current.x,startY: dragStartPos.current.y,currentX: clientX,currentY: clientY,distance,duration,velocity: distance / duration * 1000});setIsDragging(false);setIsLongPress(false);}, [isDragging, isLongPress, taps]);// 双指缩放处理const handleTouchMove = useCallback((e) => {if (e.touches.length === 2) {const touch1 = e.touches[0];const touch2 = e.touches[1];const distance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) +Math.pow(touch2.clientY - touch1.clientY, 2));setPinchDistance(distance);}}, []);useEffect(() => {const element = document.querySelector('.gesture-area');if (element) {element.addEventListener('mousedown', handleMouseDown);element.addEventListener('mousemove', handleMouseMove);element.addEventListener('mouseup', handleMouseUp);element.addEventListener('touchstart', handleMouseDown);element.addEventListener('touchmove', (e) => {handleMouseMove(e);handleTouchMove(e);});element.addEventListener('touchend', handleMouseUp);return () => {element.removeEventListener('mousedown', handleMouseDown);element.removeEventListener('mousemove', handleMouseMove);element.removeEventListener('mouseup', handleMouseUp);element.removeEventListener('touchstart', handleMouseDown);element.removeEventListener('touchmove', handleMouseMove);element.removeEventListener('touchend', handleMouseUp);};}}, [handleMouseDown, handleMouseMove, handleMouseUp, handleTouchMove]);return (<div className="complex-interaction-demo"><h2>Complex Interaction Demo</h2><div className="gesture-info"><h3>Gesture Information</h3><div className="gesture-data"><p><strong>Type:</strong> {gesture.type}</p><p><strong>Start:</strong> ({gesture.startX}, {gesture.startY})</p><p><strong>Current:</strong> ({gesture.currentX}, {gesture.currentY})</p><p><strong>Distance:</strong> {gesture.distance.toFixed(2)}px</p><p><strong>Duration:</strong> {gesture.duration}ms</p><p><strong>Velocity:</strong> {gesture.velocity.toFixed(2)}px/s</p>{pinchDistance > 0 && <p><strong>Pinch:</strong> {pinchDistance.toFixed(2)}px</p>}</div></div><div className="gesture-area"style={{width: '400px',height: '300px',border: '2px solid #007bff',borderRadius: '8px',display: 'flex',alignItems: 'center',justifyContent: 'center',cursor: 'pointer',userSelect: 'none',backgroundColor: isDragging ? '#e3f2fd' : '#f8f9fa'}}><div style={{ textAlign: 'center' }}><h4>Gesture Area</h4><p>Try: Tap, Double Tap, Long Press, Drag, Swipe</p><p>Pinch to zoom (on touch devices)</p>{isLongPress && <p style={{ color: 'red' }}>Long Press Detected!</p>}{isDragging && <p style={{ color: 'blue' }}>Dragging...</p>}</div></div><div className="interaction-hints"><h3>Interaction Types</h3><ul><li><strong>Tap:</strong> Quick touch and release within 200ms</li><li><strong>Double Tap:</strong> Two taps within 300ms</li><li><strong>Long Press:</strong> Hold for 500ms</li><li><strong>Drag:</strong> Move finger with distance > 10px</li><li><strong>Swipe:</strong> Fast drag with distance > 50px</li><li><strong>Pinch:</strong> Two finger pinch gesture</li></ul></div></div>);
};// 4. 键盘快捷键处理
const KeyboardShortcutsDemo = () => {const [shortcuts, setShortcuts] = useState([]);const [isCtrlPressed, setIsCtrlPressed] = useState(false);const [isShiftPressed, setIsShiftPressed] = useState(false);const addShortcut = useCallback((shortcut) => {setShortcuts(prev => [...prev.slice(-9), shortcut]);}, []);const handleKeyDown = useCallback((e) => {// 更新修饰键状态if (e.key === 'Control') setIsCtrlPressed(true);if (e.key === 'Shift') setIsShiftPressed(true);// 构建快捷键字符串const parts = [];if (e.ctrlKey) parts.push('Ctrl');if (e.shiftKey) parts.push('Shift');if (e.altKey) parts.push('Alt');if (e.metaKey) parts.push('Meta');parts.push(e.key);const shortcutString = parts.join('+');addShortcut(shortcutString);// 常用快捷键处理switch (shortcutString) {case 'Ctrl+S':e.preventDefault();console.log('Save action triggered');break;case 'Ctrl+C':console.log('Copy action triggered');break;case 'Ctrl+V':console.log('Paste action triggered');break;case 'Ctrl+Z':console.log('Undo action triggered');break;case 'Ctrl+Y':console.log('Redo action triggered');break;case 'Escape':console.log('Cancel action triggered');break;case 'F5':e.preventDefault();console.log('Refresh action triggered');break;default:// 其他快捷键处理break;}}, [addShortcut]);const handleKeyUp = useCallback((e) => {if (e.key === 'Control') setIsCtrlPressed(false);if (e.key === 'Shift') setIsShiftPressed(false);}, []);useEffect(() => {window.addEventListener('keydown', handleKeyDown);window.addEventListener('keyup', handleKeyUp);return () => {window.removeEventListener('keydown', handleKeyDown);window.removeEventListener('keyup', handleKeyUp);};}, [handleKeyDown, handleKeyUp]);return (<div className="keyboard-shortcuts-demo"><h2>Keyboard Shortcuts Demo</h2><div className="modifier-keys"><h3>Modifier Keys</h3><div className={`key-indicator ${isCtrlPressed ? 'active' : ''}`}>Ctrl: {isCtrlPressed ? 'Pressed' : 'Released'}</div><div className={`key-indicator ${isShiftPressed ? 'active' : ''}`}>Shift: {isShiftPressed ? 'Pressed' : 'Released'}</div></div><div className="shortcuts-log"><h3>Recent Shortcuts</h3>{shortcuts.map((shortcut, index) => (<div key={index} className="shortcut-item">{shortcut}</div>))}</div><div className="shortcut-cheatsheet"><h3>Common Shortcuts</h3><div className="shortcut-grid"><div className="shortcut-item"><kbd>Ctrl</kbd> + <kbd>S</kbd><span>Save</span></div><div className="shortcut-item"><kbd>Ctrl</kbd> + <kbd>C</kbd><span>Copy</span></div><div className="shortcut-item"><kbd>Ctrl</kbd> + <kbd>V</kbd><span>Paste</span></div><div className="shortcut-item"><kbd>Ctrl</kbd> + <kbd>Z</kbd><span>Undo</span></div><div className="shortcut-item"><kbd>Ctrl</kbd> + <kbd>Y</kbd><span>Redo</span></div><div className="shortcut-item"><kbd>Escape</kbd><span>Cancel</span></div></div></div></div>);
};
5.3.2 响应式设计与自适应交互
响应式布局与交互优化：
import React, { useState, useEffect, useCallback, useMemo } from 'react';// 1. 响应式 Hook
const useResponsive = () => {const [windowSize, setWindowSize] = useState({width: typeof window !== 'undefined' ? window.innerWidth : 1200,height: typeof window !== 'undefined' ? window.innerHeight : 800});const [deviceType, setDeviceType] = useState('desktop');useEffect(() => {const handleResize = () => {const width = window.innerWidth;const height = window.innerHeight;setWindowSize({ width, height });// 设备类型判断if (width < 768) {setDeviceType('mobile');} else if (width < 1024) {setDeviceType('tablet');} else {setDeviceType('desktop');}};handleResize();window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, []);const isMobile = deviceType === 'mobile';const isTablet = deviceType === 'tablet';const isDesktop = deviceType === 'desktop';return {windowSize,deviceType,isMobile,isTablet,isDesktop};
};// 2. 响应式网格布局
const ResponsiveGrid = ({ items, renderItem }) => {const { windowSize, deviceType } = useResponsive();const gridConfig = useMemo(() => {switch (deviceType) {case 'mobile':return { columns: 1, gap: 16, itemHeight: 200 };case 'tablet':return { columns: 2, gap: 20, itemHeight: 250 };case 'desktop':return { columns: windowSize.width >= 1440 ? 4 : 3, gap: 24, itemHeight: 300 };default:return { columns: 3, gap: 24, itemHeight: 300 };}}, [deviceType, windowSize.width]);const gridStyle = useMemo(() => ({display: 'grid',gridTemplateColumns: `repeat(${gridConfig.columns}, 1fr)`,gap: `${gridConfig.gap}px`,padding: `${gridConfig.gap}px`}), [gridConfig]);return (<div className="responsive-grid" style={gridStyle}>{items.map((item, index) => (<div key={item.id || index} style={{ height: `${gridConfig.itemHeight}px` }}>{renderItem(item, index, deviceType)}</div>))}</div>);
};// 3. 自适应交互组件
const AdaptiveUI = () => {const { deviceType, isMobile, isTablet, isDesktop } = useResponsive();const [selectedView, setSelectedView] = useState('grid');const [sidebarOpen, setSidebarOpen] = useState(false);// 响应式视图切换const viewOptions = useMemo(() => {const baseOptions = [{ id: 'grid', label: 'Grid View', icon: '⊞' },{ id: 'list', label: 'List View', icon: '☰' }];if (!isMobile) {baseOptions.push({ id: 'table', label: 'Table View', icon: '⊟' },{ id: 'card', label: 'Card View', icon: '▦' });}return baseOptions;}, [isMobile]);// 生成测试数据const items = useMemo(() => Array.from({ length: 20 }, (_, i) => ({id: i + 1,title: `Item ${i + 1}`,description: `Description for item ${i + 1}`,category: ['Design', 'Development', 'Marketing', 'Sales'][i % 4],status: ['active', 'pending', 'completed'][i % 3],value: Math.floor(Math.random() * 100),date: new Date(Date.now() - Math.random() * 10000000000).toLocaleDateString()})), []);// 渲染函数const renderItem = useCallback((item, index, device) => {switch (selectedView) {case 'grid':return <GridViewItem item={item} device={device} />;case 'list':return <ListViewItem item={item} device={device} />;case 'table':return <TableViewItem item={item} index={index} />;case 'card':return <CardViewItem item={item} />;default:return <GridViewItem item={item} device={device} />;}}, [selectedView]);const toggleSidebar = useCallback(() => {setSidebarOpen(!sidebarOpen);}, [sidebarOpen]);return (<div className={`adaptive-ui ${deviceType}`}><header className="app-header"><div className="header-left">{isMobile && (<button onClick={toggleSidebar}className="menu-toggle">☰</button>)}<h1>Adaptive UI Demo</h1></div><nav className="header-nav">{!isMobile && (<div className="view-switcher">{viewOptions.map(option => (<buttonkey={option.id}onClick={() => setSelectedView(option.id)}className={`view-button ${selectedView === option.id ? 'active' : ''}`}><span className="icon">{option.icon}</span><span className="label">{option.label}</span></button>))}</div>)}{isMobile && (<selectvalue={selectedView}onChange={(e) => setSelectedView(e.target.value)}className="mobile-view-select">{viewOptions.map(option => (<option key={option.id} value={option.id}>{option.label}</option>))}</select>)}</nav></header><div className="app-body"><aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}><h3>Filters</h3>{/* 移动端关闭按钮 */}{isMobile && (<button onClick={() => setSidebarOpen(false)}className="sidebar-close">×</button>)}<div className="filter-group"><label>Category:</label><select><option value="">All Categories</option><option value="Design">Design</option><option value="Development">Development</option><option value="Marketing">Marketing</option><option value="Sales">Sales</option></select></div><div className="filter-group"><label>Status:</label><select><option value="">All Status</option><option value="active">Active</option><option value="pending">Pending</option><option value="completed">Completed</option></select></div>{!isMobile && (<div className="device-info"><h4>Device Info</h4><p>Device: {deviceType}</p><p>Screen: {isMobile ? 'Small' : isTablet ? 'Medium' : 'Large'}</p></div>)}</aside><main className="content">{isMobile && (<button onClick={() => setSidebarOpen(true)}className="filter-toggle"style={{ marginBottom: '16px' }}>🔍 Filters</button>)}<ResponsiveGrid items={items}renderItem={renderItem}/></main></div>{/* 移动端遮罩 */}{isMobile && sidebarOpen && (<div className="overlay"onClick={() => setSidebarOpen(false)}/>)}</div>);
};// 4. 视图组件
const GridViewItem = ({ item, device }) => (<div className="grid-item"><h4>{item.title}</h4><p>{!device || device === 'mobile' ? item.description.slice(0, 50) + '...' : item.description}</p><span className={`status ${item.status}`}>{item.status}</span><p className="category">{item.category}</p></div>
);const ListViewItem = ({ item, device }) => (<div className={`list-item ${device}`}><div className="item-content"><div className="item-header"><h4>{item.title}</h4><span className={`status ${item.status}`}>{item.status}</span></div><p>{item.description}</p><div className="item-meta"><span className="category">{item.category}</span><span className="date">{item.date}</span></div></div>{!device || device === 'desktop' ? (<div className="item-actions"><button>View</button><button>Edit</button><button>Delete</button></div>) : (<button className="action-menu">⋯</button>)}</div>
);const TableViewItem = ({ item, index }) => (<tr className="table-item"><td>{index + 1}</td><td>{item.title}</td><td>{item.category}</td><td><span className={`status ${item.status}`}>{item.status}</span></td><td>{item.value}</td><td>{item.date}</td><td><div className="table-actions"><button>👁</button><button>✏️</button><button>🗑️</button></div></td></tr>
);const CardViewItem = ({ item }) => (<div className="card-item"><div className="card-header"><h4>{item.title}</h4><span className={`status ${item.status}`}>{item.status}</span></div><div className="card-body"><p>{item.description}</p><div className="card-stats"><div className="stat"><label>Category</label><span>{item.category}</span></div><div className="stat"><label>Value</label><span>{item.value}</span></div><div className="stat"><label>Date</label><span>{item.date}</span></div></div></div><div className="card-footer"><button>View Details</button><button>Quick Action</button></div></div>
);
通过这些高级事件处理和响应式设计技术，你可以构建出适应各种设备和交互场景的用户界面，提供优秀的用户体验。
5.4 动画与过渡效果
5.4.1 CSS 过渡与动画
React 中的 CSS 动画实现：
import React, { useState, useEffect, useRef } from 'react';// 1. CSS 过渡效果组件
const CSSTransitionDemo = () => {const [showBox, setShowBox] = useState(false);const [isModalOpen, setIsModalOpen] = useState(false);const [notification, setNotification] = useState(null);const [items, setItems] = useState([]);// 通知系统const showNotification = useCallback((message, type = 'info') => {const id = Date.now();const newNotification = { id, message, type };setNotification(newNotification);setTimeout(() => {setNotification(null);}, 3000);}, []);// 列表项操作const addItem = useCallback(() => {const id = Date.now();setItems(prev => [...prev, { id, name: `Item ${id}` }]);}, []);const removeItem = useCallback((id) => {setItems(prev => prev.filter(item => item.id !== id));}, []);return (<div className="css-transition-demo"><h2>CSS Transitions Demo</h2>{/* 基础过渡效果 */}<section className="demo-section"><h3>Basic Transitions</h3><button onClick={() => setShowBox(!showBox)}>Toggle Box</button><div className={`transition-box ${showBox ? 'visible' : 'hidden'}`}>Smooth Transition Box</div></section>{/* 模态框过渡 */}<section className="demo-section"><h3>Modal Transition</h3><button onClick={() => setIsModalOpen(true)}>Open Modal</button><div className={`modal-overlay ${isModalOpen ? 'open' : 'closed'}`}><div className={`modal-content ${isModalOpen ? 'show' : 'hide'}`}><h3>Modal Title</h3><p>This is a modal with smooth transitions.</p><div className="modal-actions"><button onClick={() => setIsModalOpen(false)}>Cancel</button><button onClick={() => setIsModalOpen(false)}>Confirm</button></div></div></div></section>{/* 通知动画 */}<section className="demo-section"><h3>Notification Animations</h3><div className="notification-buttons"><button onClick={() => showNotification('Success message!', 'success')}>Success</button><button onClick={() => showNotification('Warning message!', 'warning')}>Warning</button><button onClick={() => showNotification('Error message!', 'error')}>Error</button></div><div className="notification-container">{notification && (<div className={`notification ${notification.type} show`}>{notification.message}</div>)}</div></section>{/* 列表动画 */}<section className="demo-section"><h3>List Animations</h3><div className="list-controls"><button onClick={addItem}>Add Item</button><button onClick={() => setItems([])}>Clear All</button></div><div className="animated-list">{items.map((item, index) => (<div key={item.id}className="list-item show"style={{animationDelay: `${index * 0.1}s`}}><span>{item.name}</span><button onClick={() => removeItem(item.id)}className="remove-btn">×</button></div>))}</div></section></div>);
};// 2. 自定义动画组件
const CustomAnimationComponent = () => {const [isAnimating, setIsAnimating] = useState(false);const [progress, setProgress] = useState(0);const animationRef = useRef(null);// 关键帧动画const triggerKeyframeAnimation = () => {setIsAnimating(true);if (animationRef.current) {animationRef.current.beginElement();}setTimeout(() => setIsAnimating(false), 2000);};// 进度条动画const startProgressAnimation = () => {setProgress(0);let currentProgress = 0;const interval = setInterval(() => {currentProgress += 2;setProgress(currentProgress);if (currentProgress >= 100) {clearInterval(interval);}}, 50);};return (<div className="custom-animation-demo"><h2>Custom Animations</h2>{/* SVG 动画 */}<section className="demo-section"><h3>SVG Animations</h3><div className="svg-animation"><svg width="200" height="200" viewBox="0 0 200 200">{/* 定义动画 */}<defs><animateTransformid="rotateAnimation"attributeName="transform"attributeType="XML"type="rotate"from="0 100 100"to="360 100 100"dur="2s"repeatCount="1"/><animateid="pulseAnimation"attributeName="r"values="40;60;40"dur="2s"repeatCount="1"/></defs>{/* 旋转的方块 */}<rectref={animationRef}x="60"y="60"width="80"height="80"fill="#007bff"rx="8"/>{/* 脉冲的圆 */}<circlecx="100"cy="100"r="40"fill="none"stroke="#28a745"strokeWidth="3"><animateattributeName="r"values="40;60;40"dur="2s"repeatCount="indefinite"/><animateattributeName="opacity"values="1;0.3;1"dur="2s"repeatCount="indefinite"/></circle></svg><button onClick={triggerKeyframeAnimation}>Trigger SVG Animation</button></div></section>{/* 进度条动画 */}<section className="demo-section"><h3>Progress Bar Animation</h3><div className="progress-container"><div className="progress-bar"style={{ width: `${progress}%` }}>{progress}%</div></div><button onClick={startProgressAnimation}>Start Progress Animation</button></section>{/* 复杂动画序列 */}<section className="demo-section"><h3>Animation Sequence</h3><div className="animation-sequence"><div className="sequence-item" style={{ animationDelay: '0s' }}>Step 1</div><div className="sequence-item" style={{ animationDelay: '0.5s' }}>Step 2</div><div className="sequence-item" style={{ animationDelay: '1s' }}>Step 3</div><div className="sequence-item" style={{ animationDelay: '1.5s' }}>Complete!</div></div></section></div>);
};// 3. 交互式动画组件
const InteractiveAnimationDemo = () => {const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });const [isHovered, setIsHovered] = useState(false);const [clickPosition, setClickPosition] = useState({ x: 0, y: 0 });const [ripples, setRipples] = useState([]);const containerRef = useRef(null);// 鼠标跟踪const handleMouseMove = (e) => {if (containerRef.current) {const rect = containerRef.current.getBoundingClientRect();setMousePosition({x: e.clientX - rect.left,y: e.clientY - rect.top});}};// 点击涟漪效果const handleClick = (e) => {if (containerRef.current) {const rect = containerRef.current.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;const ripple = {id: Date.now(),x,y};setRipples(prev => [...prev, ripple]);setTimeout(() => {setRipples(prev => prev.filter(r => r.id !== ripple.id));}, 1000);}};return (<div className="interactive-animation-demo"><h2>Interactive Animations</h2>{/* 鼠标跟随效果 */}<section className="demo-section"><h3>Mouse Following</h3><div className="mouse-follow-container"ref={containerRef}onMouseMove={handleMouseMove}onMouseEnter={() => setIsHovered(true)}onMouseLeave={() => setIsHovered(false)}><div className="mouse-follower"style={{left: `${mousePosition.x}px`,top: `${mousePosition.y}px`,opacity: isHovered ? 1 : 0}}/><div className="content">Move your mouse here!</div></div></section>{/* 点击涟漪效果 */}<section className="demo-section"><h3>Click Ripple Effect</h3><div className="ripple-container"onClick={handleClick}>{ripples.map(ripple => (<divkey={ripple.id}className="ripple"style={{left: `${ripple.x}px`,top: `${ripple.y}px`}}/>))}<div className="content">Click anywhere to create ripples</div></div></section>{/* 拖拽动画 */}<section className="demo-section"><h3>Drag Animation</h3><DraggableAnimation /></section></div>);
};// 可拖拽动画组件
const DraggableAnimation = () => {const [position, setPosition] = useState({ x: 50, y: 50 });const [isDragging, setIsDragging] = useState(false);const [dragStart, setDragStart] = useState({ x: 0, y: 0 });const handleMouseDown = (e) => {setIsDragging(true);setDragStart({x: e.clientX - position.x,y: e.clientY - position.y});};const handleMouseMove = (e) => {if (isDragging) {setPosition({x: e.clientX - dragStart.x,y: e.clientY - dragStart.y});}};const handleMouseUp = () => {setIsDragging(false);};useEffect(() => {if (isDragging) {document.addEventListener('mousemove', handleMouseMove);document.addEventListener('mouseup', handleMouseUp);return () => {document.removeEventListener('mousemove', handleMouseMove);document.removeEventListener('mouseup', handleMouseUp);};}}, [isDragging, dragStart]);return (<div className="draggable-animation"><divclassName={`draggable-box ${isDragging ? 'dragging' : ''}`}style={{left: `${position.x}px`,top: `${position.y}px`,transform: isDragging ? 'scale(1.1)' : 'scale(1)',cursor: isDragging ? 'grabbing' : 'grab'}}onMouseDown={handleMouseDown}>Drag me!</div></div>);
};
5.4.2 React 动画库集成
Framer Motion 高级动画：
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence, useAnimation } from 'framer-motion';// 1. Framer Motion 基础动画
const FramerMotionDemo = () => {const [isOpen, setIsOpen] = useState(false);const [items, setItems] = useState([{ id: 1, text: 'Item 1', color: '#ff6b6b' },{ id: 2, text: 'Item 2', color: '#4ecdc4' },{ id: 3, text: 'Item 3', color: '#45b7d1' }]);const addItem = () => {const newId = Math.max(...items.map(item => item.id), 0) + 1;const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f7dc6f', '#bb8fce'];setItems([...items,{id: newId,text: `Item ${newId}`,color: colors[Math.floor(Math.random() * colors.length)]}]);};const removeItem = (id) => {setItems(items.filter(item => item.id !== id));};return (<div className="framer-motion-demo"><h2>Framer Motion Demo</h2>{/* 基础动画 */}<motion.section className="demo-section"><h3>Basic Animations</h3><motion.buttonwhileHover={{ scale: 1.05 }}whileTap={{ scale: 0.95 }}onClick={() => setIsOpen(!isOpen)}>Toggle Box</motion.button><AnimatePresence>{isOpen && (<motion.divinitial={{ opacity: 0, scale: 0.8 }}animate={{ opacity: 1, scale: 1 }}exit={{ opacity: 0, scale: 0.8 }}transition={{ duration: 0.3, ease: 'easeInOut' }}className="animated-box">Animated Box with Framer Motion</motion.div>)}</AnimatePresence></motion.section>{/* 手势动画 */}<motion.section className="demo-section"><h3>Gesture Animations</h3><motion.divdragdragConstraints={{ left: 0, right: 300, top: 0, bottom: 200 }}dragElastic={0.2}whileDrag={{ scale: 1.1 }}className="draggable-motion-box">Drag me around!</motion.div><motion.buttonwhileHover={{ scale: 1.1,backgroundColor: '#007bff',color: 'white'}}whileTap={{ scale: 0.9,backgroundColor: '#0056b3'}}transition={{ type: 'spring', stiffness: 400, damping: 17 }}>Hover & Tap Effects</motion.button></motion.section>{/* 列表动画 */}<motion.section className="demo-section"><h3>List Animations</h3><motion.button onClick={addItem}whileHover={{ scale: 1.05 }}whileTap={{ scale: 0.95 }}>Add Item</motion.button><motion.ul className="motion-list"><AnimatePresence>{items.map((item, index) => (<motion.likey={item.id}initial={{ opacity: 0, x: -50,scale: 0.8}}animate={{ opacity: 1, x: 0,scale: 1}}exit={{ opacity: 0, x: 50,scale: 0.8}}transition={{type: 'spring',stiffness: 300,damping: 30,delay: index * 0.1}}layoutwhileHover={{ scale: 1.02,backgroundColor: item.color,color: 'white'}}style={{ borderLeft: `4px solid ${item.color}` }}><span>{item.text}</span><motion.buttonwhileHover={{ scale: 1.1 }}whileTap={{ scale: 0.9 }}onClick={() => removeItem(item.id)}className="remove-motion-btn">×</motion.button></motion.li>))}</AnimatePresence></motion.ul></motion.section>{/* 复杂动画序列 */}<ComplexAnimationSequence /></div>);
};// 复杂动画序列组件
const ComplexAnimationSequence = () => {const controls = useAnimation();const [sequenceStep, setSequenceStep] = useState(0);const [isPlaying, setIsPlaying] = useState(false);const playSequence = async () => {setIsPlaying(true);// 步骤 1: 淡入await controls.start({opacity: 1,scale: 1,rotate: 0,transition: { duration: 0.8, ease: 'easeOut' }});setSequenceStep(1);// 步骤 2: 旋转await controls.start({rotate: 360,transition: { duration: 1, ease: 'easeInOut' }});setSequenceStep(2);// 步骤 3: 变形await controls.start({borderRadius: '50%',scale: 1.2,backgroundColor: '#4ecdc4',transition: { duration: 0.8, ease: 'easeInOut' }});setSequenceStep(3);// 步骤 4: 弹跳await controls.start({y: [0, -50, 0],transition: { duration: 0.6,ease: 'easeOut',times: [0, 0.5, 1]}});setSequenceStep(4);// 步骤 5: 重置await controls.start({borderRadius: '8px',scale: 1,backgroundColor: '#007bff',y: 0,transition: { duration: 0.8, ease: 'easeInOut' }});setSequenceStep(0);setIsPlaying(false);};const resetAnimation = () => {controls.set({opacity: 0.3,scale: 0.8,rotate: 0});setSequenceStep(0);setIsPlaying(false);};return (<section className="demo-section"><h3>Animation Sequence</h3><div className="sequence-controls"><buttononClick={playSequence}disabled={isPlaying}whileHover={{ scale: 1.05 }}whileTap={{ scale: 0.95 }}>{isPlaying ? 'Playing...' : 'Play Sequence'}</button><buttononClick={resetAnimation}whileHover={{ scale: 1.05 }}whileTap={{ scale: 0.95 }}>Reset</button></div><div className="sequence-step">Current Step: {sequenceStep}/4</div><motion.divanimate={controls}initial={{opacity: 0.3,scale: 0.8,rotate: 0}}className="sequence-box"/><div className="sequence-description"><div className={`step ${sequenceStep >= 1 ? 'completed' : ''}`}>1. Fade In</div><div className={`step ${sequenceStep >= 2 ? 'completed' : ''}`}>2. Rotate</div><div className={`step ${sequenceStep >= 3 ? 'completed' : ''}`}>3. Transform</div><div className={`step ${sequenceStep >= 4 ? 'completed' : ''}`}>4. Bounce</div><div className={`step ${sequenceStep >= 5 ? 'completed' : ''}`}>5. Reset</div></div></section>);
};// 响应式动画演示
const ResponsiveAnimationDemo = () => {const [windowSize, setWindowSize] = useState({width: typeof window !== 'undefined' ? window.innerWidth : 1200,height: typeof window !== 'undefined' ? window.innerHeight : 800});useEffect(() => {const handleResize = () => {setWindowSize({width: window.innerWidth,height: window.innerHeight});};window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, []);const isMobile = windowSize.width < 768;const isTablet = windowSize.width >= 768 && windowSize.width < 1024;return (<section className="demo-section"><h3>Responsive Animations</h3><div className="responsive-info"><p>Window Size: {windowSize.width} x {windowSize.height}</p><p>Device: {isMobile ? 'Mobile' : isTablet ? 'Tablet' : 'Desktop'}</p></div><motion.divinitial={{ x: -200 }}animate={{ x: isMobile ? 0 : isTablet ? -50 : -100,rotate: isMobile ? 0 : 5}}transition={{type: 'spring',stiffness: isMobile ? 200 : 400,damping: isMobile ? 20 : 30}}className="responsive-box">Responsive Animation</motion.div><motion.divvariants={{mobile: { scale: 0.8, rotate: 0 },tablet: { scale: 1, rotate: 5 },desktop: { scale: 1.2, rotate: 10 }}}animate={isMobile ? 'mobile' : isTablet ? 'tablet' : 'desktop'}transition={{ duration: 0.5, ease: 'easeInOut' }}className="device-variant-box">Device Variant</motion.div></section>);
};
5.4.3 性能优化动画
高性能动画实现：
import React, { useState, useRef, useEffect, useCallback } from 'react';// 1. 使用 CSS Transform 和 Will-change
const PerformantAnimation = () => {const [isAnimating, setIsAnimating] = useState(false);const [scrollY, setScrollY] = useState(0);const containerRef = useRef(null);// 优化的滚动动画const optimizedScroll = useCallback(() => {requestAnimationFrame(() => {setScrollY(window.scrollY);});}, []);useEffect(() => {window.addEventListener('scroll', optimizedScroll);return () => window.removeEventListener('scroll', optimizedScroll);}, [optimizedScroll]);// GPU 加速动画const triggerPerformanceAnimation = () => {setIsAnimating(true);setTimeout(() => {setIsAnimating(false);}, 1000);};return (<div className="performant-animation"><h2>Performance Optimized Animations</h2>{/* GPU 加速动画 */}<section className="demo-section"><h3>GPU Accelerated Animation</h3><div className="animation-grid"><div className={`gpu-box ${isAnimating ? 'animate' : ''}`}>Transform & Opacity (GPU)</div><div className={`bad-box ${isAnimating ? 'animate' : ''}`}>Left & Top (CPU)</div></div><button onClick={triggerPerformanceAnimation}>Toggle Performance Animation</button><div className="performance-tips"><h4>Performance Tips:</h4><ul><li>Use <code>transform</code> and <code>opacity</code> for smooth animations</li><li>Avoid animating <code>width</code>, <code>height</code>, <code>left</code>, <code>top</code></li><li>Use <code>will-change</code> property for elements that will animate</li><li>Prefer <code>translateZ(0)</code> to force GPU layer</li></ul></div></section>{/* 优化的滚动动画 */}<section className="demo-section"><h3>Optimized Scroll Animation</h3><div ref={containerRef}className="scroll-container"style={{ height: '400px', overflow: 'auto' }}><div style={{ height: '2000px', position: 'relative' }}><div className="sticky-element"style={{position: 'sticky',top: '20px',transform: `translateY(${Math.min(scrollY * 0.5, 100)}px)`,willChange: 'transform'}}>Sticky Element with Smooth Motion</div>{/* 滚动内容 */}{Array.from({ length: 20 }, (_, i) => (<div key={i} className="scroll-content">Scroll Item {i + 1}</div>))}</div></div><div className="scroll-info">Scroll Y: {scrollY}px</div></section>{/* 防抖动画 */}<section className="demo-section"><h3>Debounced Animation</h3><DebouncedAnimation /></section></div>);
};// 防抖动画组件
const DebouncedAnimation = () => {const [value, setValue] = useState('');const [debouncedValue, setDebouncedValue] = useState('');const [isAnimating, setIsAnimating] = useState(false);const timeoutRef = useRef(null);useEffect(() => {if (timeoutRef.current) {clearTimeout(timeoutRef.current);}timeoutRef.current = setTimeout(() => {setDebouncedValue(value);setIsAnimating(true);setTimeout(() => setIsAnimating(false), 300);}, 300);return () => {if (timeoutRef.current) {clearTimeout(timeoutRef.current);}};}, [value]);return (<div className="debounced-animation"><inputtype="text"value={value}onChange={(e) => setValue(e.target.value)}placeholder="Type something (debounced animation)"/><div className="debounced-display"><p>Current: {value}</p><p>Debounced: {debouncedValue}</p></div><div className={`animated-result ${isAnimating ? 'show' : ''}`}>{debouncedValue}</div></div>);
};// 2. 虚拟化长列表动画
const VirtualizedAnimatedList = () => {const [items] = useState(() => Array.from({ length: 1000 }, (_, i) => ({id: i,text: `Item ${i + 1}`,height: 50 + Math.random() * 50})));return (<section className="demo-section"><h3>Virtualized Animated List</h3><div className="virtual-list-container" style={{ height: '400px' }}>{items.map((item, index) => (<divkey={item.id}className="virtual-list-item"style={{height: `${item.height}px`,opacity: 1,transform: 'translateY(0)',willChange: 'transform, opacity'}}>{item.text}</div>))}</div><div className="virtualization-tips"><h4>Virtualization Benefits:</h4><ul><li>Only render visible items</li><li>Use Intersection Observer for dynamic rendering</li><li>Recycle DOM elements</li><li>Use CSS containment for performance</li></ul></div></section>);
};
通过这些动画技术和性能优化策略，你可以创建流畅、高性能的用户界面动画，同时保持良好的性能表现。关键是选择合适的动画方式，并充分利用现代浏览器的硬件加速能力。
 的使用与作用详解 - 教程)
