typescript
复制
// components/HeavyComponent.tsx import React, { memo, useMemo } from 'react'; interface Item { id: string; complexData: { // 复杂嵌套结构 }; } const HeavyComponent = memo(({ items }: { items: Item[] }) => { const processedItems = useMemo(() => { return items.map(transformComplexData); }, [items]); return ({processedItems.map(item => (); }, (prev, next) => { // 深度比较优化 return isEqual(prev.items, next.items); }); // 使用Reselect风格的选择器优化 const transformComplexData = (item: Item) => { // 复杂数据转换逻辑 };handleAction(item.id), [item.id])} /> ))}
typescript
复制
// utils/scheduler.ts import { unstable_scheduleCallback as scheduleCallback } from 'scheduler'; const processInBatches = async (data: any[]) => { const BATCH_SIZE = 100; let results = []; for (let i = 0; i < data.length; i += BATCH_SIZE) { await new Promise(resolve => { scheduleCallback(resolve); }); const batch = data.slice(i, i + BATCH_SIZE); results = results.concat(processBatch(batch)); } return results; };
typescript
复制
// hooks/useSafeEffect.ts import { useEffect, useRef } from 'react'; export const useSafeEffect = (effect: () => void, deps?: any[]) => { const isMounted = useRef(true); useEffect(() => { return () => { isMounted.current = false; }; }, []); useEffect(() => { if (isMounted.current) { return effect(); } }, deps); }; // 使用示例 const fetchData = () => { useSafeEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }) .then(res => { if (isMounted.current) setData(res); }); return () => controller.abort(); }, [url]); };
typescript
复制
// utils/VectorPool.ts class Vector3Pool { private static pool: THREE.Vector3[] = []; static acquire(x: number, y: number, z: number) { return this.pool.pop() || new THREE.Vector3(x, y, z); } static release(vec: THREE.Vector3) { this.pool.push(vec.set(0, 0, 0)); } } // 在动画组件中使用 const Particle = ({ position }) => { const vec = Vector3Pool.acquire(position.x, position.y, position.z); useEffect(() => { return () => Vector3Pool.release(vec); }, []); // 使用vec进行渲染... };
typescript
复制
// devtools/StateLogger.tsx import { useEffect } from 'react'; import { useWhyDidYouUpdate } from 'ahooks'; const StateLogger = ({ name, value }: { name: string; value: any }) => { useWhyDidYouUpdate(name, value); useEffect(() => { console.log(`[STATE_UPDATE] ${name}:`, value); window.performance.mark(`${name}_update_start`); return () => { window.performance.measure( `${name}_update`, `${name}_update_start`, performance.now() ); }; }, [value]); return null; }; // 在组件中使用 const MyComponent = ({ data }) => { return ( <>{/* 组件内容 */} ); };
typescript
复制
// utils/profiler.ts const withProfiler = (WrappedComponent: React.ComponentType) => { return (props: any) => { const startRender = useRef(performance.now()); useEffect(() => { const measure = performance.now() - startRender.current; console.log(`Render time: ${measure.toFixed(2)}ms`); window.__perfLogs?.push({ component: WrappedComponent.name, duration: measure }); }); return; }; }; // 使用装饰器模式 @withProfiler class OptimizedComponent extends React.Component { // 组件实现... }
typescript
复制
// components/EnhancedErrorBoundary.tsx class EnhancedErrorBoundary extends React.Component { state = { error: null, info: null }; static getDerivedStateFromError(error) { return { error }; } componentDidCatch(error, info) { this.setState({ info }); logErrorToService(error, info); // 自动恢复机制 if (isRecoverable(error)) { setTimeout(() => this.setState({ error: null }), 5000); } } render() { if (this.state.error) { return (); } return this.props.children; } }
typescript
复制
// utils/errorTracking.ts const createSafeAsync =( fn: (...args: T) => Promise ) => { return async (...args: T): Promise => { try { return await fn(...args); } catch (error) { captureException(error, { extra: { args }, tags: { category: 'async_operation' } }); if (isNetworkError(error)) { showNetworkErrorToast(); } throw error; // 保持错误传播 } }; }; // 使用示例 const fetchData = createSafeAsync(async (url: string) => { const res = await fetch(url); return res.json(); });
typescript
复制
// routes/lazy.tsx import { lazy, Suspense } from 'react'; import LoadingIndicator from './LoadingIndicator'; const createLazyPage = (loader: () => Promise) => { const Component = lazy(async () => { const start = performance.now(); const module = await loader(); const loadTime = performance.now() - start; if (loadTime > 2000) { reportLongLoading(loadTime); } return module; }); return (props: any) => ( } > ); }; const AdminPage = createLazyPage(() => import('./pages/AdminPage'));
javascript
复制
// babel.config.js module.exports = { presets: [ [ '@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react', }, ], ], plugins: [ ['@emotion/babel-plugin', { autoLabel: 'dev-only' }], 'babel-plugin-macros', 'babel-plugin-codegen' ] }; // 使用编译时生成的代码 // components/Icons.generated.ts // 自动生成基于SVG文件的React组件
typescript
复制
// devtools/StateInspector.tsx import { useDebugValue } from 'react'; import { format } from 'util-inspect'; const useInspector =(state: T, name: string) => { useDebugValue(`${name}: ${format(state)}`); useEffect(() => { window.__REACT_DEVTOOLS__?.sendInspectorData({ type: 'CUSTOM_HOOK', name, value: state }); }, [state]); }; // 在自定义Hook中使用 const useComplexState = () => { const [state] = useState(/* 复杂状态 */); useInspector(state, 'useComplexState'); return state; };
typescript
复制
// components/PerfDashboard.tsx const PerfDashboard = () => { const [metrics, setMetrics] = useState([]); useEffect(() => { const observer = new PerformanceObserver(list => { setMetrics(prev => [ ...prev, ...list.getEntries().map(formatPerfEntry) ]); }); observer.observe({ entryTypes: ['measure'] }); return () => observer.disconnect(); }, []); return ( ); };性能指标 ({metrics.length})
{metrics.map((entry, i) => ( ))}
{entry.name} {entry.duration.toFixed(1)}ms
本文深入探讨了React应用优化的多个关键层面,从渲染控制到内存管理,从调试技术到构建优化,构建起完整的性能优化体系。现代前端开发要求开发者不仅要实现功能,更要具备性能敏感性,能够:
通过React DevTools Profiler识别渲染瓶颈
利用Chrome Performance面板分析运行时性能
使用内存快照诊断内存泄漏问题
结合Sentry等工具建立错误监控体系
通过CI/CD集成自动化性能检测