Оптимизация производительности React

Производительность - ключевой аспект успешного веб-приложения. В этой статье мы рассмотрим различные техники оптимизации React приложений.

React.memo

Используйте `React.memo` для предотвращения ненужных ре-рендеров:

```typescript const ExpensiveComponent = React.memo(({ data }) => { // Тяжелые вычисления return <div>{/* ... */}</div>; }, (prevProps, nextProps) => { // Кастомная функция сравнения return prevProps.data.id === nextProps.data.id; }); ```

useMemo и useCallback

Мемоизируйте вычисления и функции:

```typescript function Component({ items, filter }) { // Мемоизация вычислений const filteredItems = useMemo(() => { return items.filter(item => item.category === filter); }, [items, filter]);

// Мемоизация функций const handleClick = useCallback(() => { // Обработчик }, []);

return <div>{/* ... */}</div>; } ```

Code Splitting

Разбивайте код на чанки для улучшения времени загрузки:

```typescript // Динамический импорт const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() { return ( <Suspense fallback={<div>Загрузка...</div>}> <HeavyComponent /> </Suspense> ); } ```

Виртуализация списков

Для больших списков используйте виртуализацию:

```typescript import { FixedSizeList } from 'react-window';

function VirtualizedList({ items }) { return ( <FixedSizeList height={600} itemCount={items.length} itemSize={50} width="100%" > {({ index, style }) => ( <div style={style}> {items[index].name} </div> )} </FixedSizeList> ); } ```

Оптимизация изображений

Используйте ленивую загрузку для изображений:

```typescript <img src="image.jpg" loading="lazy" alt="Description" /> ```

Profiling

Используйте React DevTools Profiler для выявления узких мест:

1. Установите React DevTools
2. Откройте вкладку Profiler
3. Запишите сессию
4. Анализируйте результаты

Заключение

Оптимизация производительности - это итеративный процесс. Используйте эти техники для создания быстрых и отзывчивых приложений.