Дан компонент из 1000 строк, который тормозит. В нем галерея из 100 картинок (10% битых) и большой список элементов. С чего начнешь оптимизацию и с помощью каких средств?

Question

Начну с профилирования производительности React DevTools, затем разделю компонент на меньшие, использую React.memo для предотвращения лишних ре-рендеров, реализую виртуализацию для большого списка, lazy loading для изображений и обработку битых картинок. Также проверю мемоизацию вычислений и оптимизацию обработчиков событий.

YeaHub · Accepted Answer

Оптимизация большого компонента требует системного подхода и использования специализированных инструментов.План оптимизации:1. Анализ и профилирование:// React DevTools Profiler // - Запись взаимодействий // - Поиск "expensive" компонентов // - Анализ времени рендера // Chrome DevTools Performance tab // - Record performance // - Identify bottlenecks // - Memory leaks detection2. Разделение компонента:// Вместо одного большого компонента const BigComponent = () => { // 1000 строк кода }; // Разделить на логические части const OptimizedComponent = () => ( <> );3. Оптимизация ре-рендеров:// React.memo для предотвращения лишних рендеров const Gallery = React.memo(({ images }) => { return images.map(image => (

)); }); // useMemo для тяжелых вычислений const processedItems = useMemo(() => { return items.map(heavyTransformation); }, [items]); // useCallback для стабильных ссылок const handleClick = useCallback((id) => { // обработка клика }, []);4. Виртуализация списка:// Использование react-window или react-virtualized import { FixedSizeList as List } from 'react-window'; const VirtualizedList = ({ items }) => ( {({ index, style }) => (

{items[index].name}

)} );5. Оптимизация изображений:// Lazy loading с Intersection Observer const LazyImage = ({ src, alt }) => { const [isVisible, setIsVisible] = useState(false); const imgRef = useRef(); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { setIsVisible(entry.isIntersecting); }); observer.observe(imgRef.current); return () => observer.disconnect(); }, []); return (

{isVisible && {alt}

}

); };6. Обработка битых картинок:const ImageWithFallback = ({ src, alt, fallback }) => { const [hasError, setHasError] = useState(false); const [currentSrc, setCurrentSrc] = useState(src); const handleError = () => { if (!hasError) { setHasError(true); setCurrentSrc(fallback); } }; return ( {alt}

); };Инструменты для диагностики:React DevTools ProfilerChrome Performance tabLighthouse auditwhy-did-you-render для отладки ре-рендеровПриоритеты оптимизации:Устранение bottlenecks (узких мест)Снижение количества ре-рендеровОптимизация больших списковЛенивая загрузка контентаКэширование вычислений