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

]

---

]

]
1. memoization с usememo и usecallback :
]

]

проблема: ненужные повторные ресурсы из-за неизменных реквизитов или состояния.

]

Решение: кэш вычислительно дорогие операции и ссылки на функции.

const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return ;
};

лучшие практики: Использовать с React.memo для дочерних компонентов, чтобы предотвратить ненужные обновления подтрию. Идеально подходит для сложных вычислений (сортировка, фильтрация), обратные вызовы, переданные оптимизированным детям, и значения стабильного поставщика контекста.

]

---

]

]
2. ленивый загрузка и разделение кода:
]

]

задача: большой начальный размер пакета, влияющий на первую довольную краску (FCP).

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

]

const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  }>
    {showCharts && }
  
);

Advanced: интегрируйте с REACT Router для разделения кода на основе маршрута.

]

---

]

]
3. виртуализированные списки для больших наборов данных:
]

]

проблема: рендеринг тысячи элементов ошеломляет dom.

Solution: React-Window рендерирует только видимые элементы.

]

import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  
    {({ index, style }) => (
      
...
    )}
  
);

BONUS: Использовать varialAbleIzeList для динамических высот строк и React-virtualized-auto-sizer для адаптивных контейнеров.

]

---

]

4. эффективное управление состоянием: ]
]

задача: многократные обновления состояния, вызывающие каскадные повторные рестораны. ]

Решение: Leverage React 18's Automatic Batching. ]

React 18:

setCount(1);
setText('Updated'); // Single re-render

Pre-React 18 или для сложных сценариев: используйте userEducer для обновлений атомного состояния. ]

]

---

]

5. Debuncing API Calls:
]

проблема: чрезмерные запросы API из Rapid пользовательского ввода (например, строки поиска). ]

Solution: a Custom useBounce Hook.

import {useEffect, usestate} от 'React'; const disticebounceDvalue = (значение, задержка) => { const [debounceDvalue, setDebounceDValue] = usEState (значение); Использовать effect (() => { const handler = settimeout (() => setDebouncedValue (значение), задержка); return () => cleartimeout (обработчик); }, [значение, задержка]); Возвращение DebounceDvalue; };

import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};

pro Tip:

в сочетании с abortController для отмены запросов. ]

]

---

оптимизированный контекст API:
6. ] ]

Проблема:

ненужные повторные рестораны контекстных потребителей из-за несвязанных изменений. ]

решение:

разделение контекстов и воспоминания значений поставщика. ] ]

]

---

оптимистичные обновления UI:
7. ]

задача:

медленный пользовательский интерфейс из -за ожидания ответов API. ]

решение:

предоставьте немедленную визуальную обратную связь и откат при ошибке. ] ]

---

контрольный список производительности:

]

профиль повторно воспроизводит с помощью React Devtools Profiler.

]
1. анализировать размер пакета с помощью исходной карты-эксплу.
]
2. тест с вкладкой Chrome's Performance (дросселя процессора).
]
3. используйте
react.memo
4. , usememo , usecallback стратегически. ] реализовать инкрементную загрузку.
]
5. оптимизировать изображения/носитель с ленивой загрузкой.
]
6. рассмотрим рендеринг на стороне сервера для критического контента.
]
7. ]

помните:

сначала профиль, оптимизируйте второе! Эти методы применимы в различных рамках React (Next.js, Gatsby и т. Д.). ]