作为 Vue 开发者，在迁移到 React 开发时，性能优化的思路和方法会有所不同。本文将从 Vue 开发者熟悉的角度出发，详细介绍 React 中的性能优化策略。
渲染优化对比
Vue 的响应式系统
Vue 通过响应式系统自动追踪依赖，只有在数据真正变化时才会触发重渲染
{{ title }}
{{ description }}
点击次数：{{ count }}
React 的渲染机制
React 默认采用自上而下的渲染策略，父组件更新会触发子组件重渲染：
function App() {
const [count, setCount] = useState(0);
return (
标题
描述
{/* 每次 count 变化，整个组件树都会重新渲染 */}
点击次数：{count}
);
}优化后的版本：
const Title = memo(function Title() {
return 标题
;
});
const Description = memo(function Description() {
return 描述
;
});
const Counter = memo(function Counter({ count, onIncrement }) {
return (
<>
点击次数：{count}
);
});
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(c => c + 1);
}, []);
return (
组件优化策略
1. 组件拆分与记忆化
// 不好的实践
function ProductList({ products, onSelect }) {
return (
{products.map(product => (
onSelect(product)}>
{product.name}
{product.price}
))}
);
}
// 好的实践
const ProductItem = memo(function ProductItem({ product, onSelect }) {
const handleClick = useCallback(() => {
onSelect(product);
}, [product, onSelect]);
return (
{product.name}
{product.price}
);
});
function ProductList({ products, onSelect }) {
return (
{products.map(product => (
2. 状态管理优化
// 不好的实践
function Dashboard() {
const [state, setState] = useState({
user: null,
products: [],
orders: [],
settings: {}
});
// 任何状态更新都会导致整个组件重渲染
const updateUser = (user) => {
setState(prev => ({ ...prev, user }));
};
return (
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 (
总金额：{totalAmount}
已完成订单：{completedOrders.length}
待处理订单：{pendingOrders.length}
);
}
// 好的实践
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 (
总金额：{totalAmount}
已完成订单：{completedOrders.length}
待处理订单：{pendingOrders.length}
);
}列表渲染优化
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 (
{visibleItems.map(item => (
{item.content}
))}
);
}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 (
{items.map(item => (
{item.content}
))}
{hasMore && (
{loading ? '加载中...' : '向下滚动加载更多'}
)}
);
}数据获取优化
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 (
);
}2. 组件级别分割
const HeavyChart = lazy(() => import('./components/HeavyChart'));
function Dashboard() {
const [showChart, setShowChart] = useState(false);
return (
{showChart && (
工具和监控
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 (
{/* 应用内容 */}
);
}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();
}, []);
}最佳实践
渲染优化
- 合理拆分组件
- 使用 memo 避免不必要的重渲染
- 优化计算属性
- 合理使用 Context
状态管理
- 状态粒度适中
- 避免冗余状态
- 使用不可变数据
- 合理使用状态管理库
数据处理
- 实现请求缓存
- 避免重复请求
- 优化大数据渲染
- 使用虚拟列表
代码组织
- 合理代码分割
- 按需加载
- 预加载关键资源
- 优化打包体积
小结
React 性能优化的特点：
- 组件级别优化
- 状态管理优化
- 渲染机制优化
- 资源加载优化
从 Vue 到 React 的转变：
- 理解渲染机制差异
- 掌握优化工具
- 建立性能意识
- 实践优化策略
开发建议：
- 先测量后优化
- 避免过早优化
- 关注用户体验
- 持续监控改进
下一篇文章，我们将深入探讨 React 的测试策略，帮助你构建可靠的应用。
如果觉得这篇文章对你有帮助，别忘了点个赞