Vue 开发者的 React 实战指南：性能优化篇

作为 Vue 开发者，在迁移到 React 开发时，性能优化的思路和方法会有所不同。本文将从 Vue 开发者熟悉的角度出发，详细介绍 React 中的性能优化策略。

渲染优化对比

Vue 的响应式系统

Vue 通过响应式系统自动追踪依赖，只有在数据真正变化时才会触发重渲染

<template><div><h1>{{ title }}</h1><p>{{ description }}</p><!-- 只有 count 变化时才会重渲染 --><div>点击次数：{{ count }}</div><button @click="increment">+1</button></div>
</template><script>
export default {data() {return {title: '标题',description: '描述',count: 0}},methods: {increment() {this.count++}}
}
</script>

React 的渲染机制

React 默认采用自上而下的渲染策略，父组件更新会触发子组件重渲染：

function App() {const [count, setCount] = useState(0);return (<div><h1>标题</h1><p>描述</p>{/* 每次 count 变化，整个组件树都会重新渲染 */}<div>点击次数：{count}</div><button onClick={() => setCount(count + 1)}>+1</button></div>);
}

优化后的版本：

const Title = memo(function Title() {return <h1>标题</h1>;
});const Description = memo(function Description() {return <p>描述</p>;
});const Counter = memo(function Counter({ count, onIncrement }) {return (<><div>点击次数：{count}</div><button onClick={onIncrement}>+1</button></>);
});function App() {const [count, setCount] = useState(0);const increment = useCallback(() => {setCount(c => c + 1);}, []);return (<div><Title /><Description /><Counter count={count} onIncrement={increment} /></div>);
}

组件优化策略

1. 组件拆分与记忆化

// 不好的实践
function ProductList({ products, onSelect }) {return (<div>{products.map(product => (<div key={product.id} onClick={() => onSelect(product)}><img src={product.image} alt={product.name} /><h3>{product.name}</h3><p>{product.price}</p></div>))}</div>);
}// 好的实践
const ProductItem = memo(function ProductItem({ product, onSelect }) {const handleClick = useCallback(() => {onSelect(product);}, [product, onSelect]);return (<div onClick={handleClick}><img src={product.image} alt={product.name} /><h3>{product.name}</h3><p>{product.price}</p></div>);
});function ProductList({ products, onSelect }) {return (<div>{products.map(product => (<ProductItemkey={product.id}product={product}onSelect={onSelect}/>))}</div>);
}

2. 状态管理优化

// 不好的实践
function Dashboard() {const [state, setState] = useState({user: null,products: [],orders: [],settings: {}});// 任何状态更新都会导致整个组件重渲染const updateUser = (user) => {setState(prev => ({ ...prev, user }));};return (<div><UserProfile user={state.user} onUpdate={updateUser} /><ProductList products={state.products} /><OrderList orders={state.orders} /><Settings settings={state.settings} /></div>);
}// 好的实践
function Dashboard() {const [user, setUser] = useState(null);const [products, setProducts] = useState([]);const [orders, setOrders] = useState([]);const [settings, setSettings] = useState({});return (<div><UserProfile user={user} onUpdate={setUser} /><ProductList products={products} /><OrderList orders={orders} /><Settings settings={settings} /></div>);
}

3. 计算属性优化

// 不好的实践
function OrderSummary({ orders }) {// 每次渲染都会重新计算const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);const completedOrders = orders.filter(order => order.status === 'completed');const pendingOrders = orders.filter(order => order.status === 'pending');return (<div><p>总金额：{totalAmount}</p><p>已完成订单：{completedOrders.length}</p><p>待处理订单：{pendingOrders.length}</p></div>);
}// 好的实践
function OrderSummary({ orders }) {const totalAmount = useMemo(() => {return orders.reduce((sum, order) => sum + order.amount, 0);}, [orders]);const { completedOrders, pendingOrders } = useMemo(() => {return {completedOrders: orders.filter(order => order.status === 'completed'),pendingOrders: orders.filter(order => order.status === 'pending')};}, [orders]);return (<div><p>总金额：{totalAmount}</p><p>已完成订单：{completedOrders.length}</p><p>待处理订单：{pendingOrders.length}</p></div>);
}

列表渲染优化

1. 虚拟列表

function VirtualList({items,itemHeight,windowHeight,overscan = 3
}) {const [scrollTop, setScrollTop] = useState(0);const containerRef = useRef();const visibleCount = Math.ceil(windowHeight / itemHeight);const totalHeight = items.length * itemHeight;const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);const endIndex = Math.min(items.length,Math.ceil((scrollTop + windowHeight) / itemHeight) + overscan);const visibleItems = useMemo(() => {return items.slice(startIndex, endIndex).map((item, index) => ({...item,index: startIndex + index}));}, [items, startIndex, endIndex]);const handleScroll = useCallback((e) => {setScrollTop(e.target.scrollTop);}, []);return (<divref={containerRef}style={{ height: windowHeight, overflow: 'auto' }}onScroll={handleScroll}><div style={{ height: totalHeight, position: 'relative' }}>{visibleItems.map(item => (<divkey={item.id}style={{position: 'absolute',top: item.index * itemHeight,height: itemHeight}}>{item.content}</div>))}</div></div>);
}

2. 无限滚动

function InfiniteList({ fetchItems, itemHeight = 50 }) {const [items, setItems] = useState([]);const [loading, setLoading] = useState(false);const [hasMore, setHasMore] = useState(true);const [page, setPage] = useState(1);const containerRef = useRef();const loadMore = useCallback(async () => {if (loading || !hasMore) return;setLoading(true);try {const newItems = await fetchItems(page);if (newItems.length === 0) {setHasMore(false);} else {setItems(prev => [...prev, ...newItems]);setPage(p => p + 1);}} finally {setLoading(false);}}, [fetchItems, page, loading, hasMore]);useEffect(() => {const container = containerRef.current;if (!container) return;const observer = new IntersectionObserver(entries => {if (entries[0].isIntersecting) {loadMore();}},{ threshold: 0.5 });const sentinel = container.lastElementChild;if (sentinel) {observer.observe(sentinel);}return () => observer.disconnect();}, [loadMore]);return (<div ref={containerRef} style={{ height: '100vh', overflow: 'auto' }}>{items.map(item => (<div key={item.id} style={{ height: itemHeight }}>{item.content}</div>))}{hasMore && (<div style={{ height: itemHeight, textAlign: 'center' }}>{loading ? '加载中...' : '向下滚动加载更多'}</div>)}</div>);
}

数据获取优化

1. 请求缓存

function useQuery(key, fetcher, options = {}) {const cache = useRef(new Map());const [data, setData] = useState(null);const [error, setError] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {const fetchData = async () => {if (cache.current.has(key) && !options.forceRefetch) {setData(cache.current.get(key));setLoading(false);return;}setLoading(true);try {const result = await fetcher();cache.current.set(key, result);setData(result);setError(null);} catch (err) {setError(err);setData(null);} finally {setLoading(false);}};fetchData();}, [key, fetcher, options.forceRefetch]);return { data, error, loading };
}

2. 请求去重

function useDedupeQuery(key, fetcher) {const pendingRequests = useRef(new Map());const executeQuery = useCallback(async () => {if (pendingRequests.current.has(key)) {return pendingRequests.current.get(key);}const promise = fetcher();pendingRequests.current.set(key, promise);try {const result = await promise;pendingRequests.current.delete(key);return result;} catch (error) {pendingRequests.current.delete(key);throw error;}}, [key, fetcher]);return useQuery(key, executeQuery);
}

代码分割

1. 路由级别分割

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile = lazy(() => import('./pages/Profile'));
const Settings = lazy(() => import('./pages/Settings'));function App() {return (<Suspense fallback={<Loading />}><Routes><Route path="/" element={<Dashboard />} /><Route path="/profile" element={<Profile />} /><Route path="/settings" element={<Settings />} /></Routes></Suspense>);
}

2. 组件级别分割

const HeavyChart = lazy(() => import('./components/HeavyChart'));function Dashboard() {const [showChart, setShowChart] = useState(false);return (<div><button onClick={() => setShowChart(true)}>显示图表</button>{showChart && (<Suspense fallback={<Loading />}><HeavyChart /></Suspense>)}</div>);
}

工具和监控

1. 性能分析

import { Profiler } from 'react';function onRenderCallback(id,phase,actualDuration,baseDuration,startTime,commitTime,interactions
) {console.log({id,phase,actualDuration,baseDuration,startTime,commitTime,interactions});
}function App() {return (<Profiler id="App" onRender={onRenderCallback}><div>{/* 应用内容 */}</div></Profiler>);
}

2. 性能监控

function usePerformanceMonitor() {useEffect(() => {const observer = new PerformanceObserver((list) => {for (const entry of list.getEntries()) {if (entry.entryType === 'largest-contentful-paint') {console.log('LCP:', entry.startTime);}if (entry.entryType === 'first-input') {console.log('FID:', entry.processingStart - entry.startTime);}if (entry.entryType === 'layout-shift') {console.log('CLS:', entry.value);}}});observer.observe({entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift']});return () => observer.disconnect();}, []);
}