Какие существуют способы оптимизации React-приложений?

Question

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

YeaHub · Accepted Answer

Способы оптимизации React-приложенийОптимизация React-приложений охватывает различные аспекты от рендеринга компонентов до загрузки приложения.1. Оптимизация рендеринга компонентовМемоизация компонентовjavascript// React.memo для функциональных компонентов const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) { return

{data}

; }); // useMemo для мемоизации значений function Component({ items }) { const computedValue = useMemo(() => { return items.filter(item => item.active).length; }, [items]); // Пересчитывается только при изменении items return

{computedValue}

; } // useCallback для мемоизации функций function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount(prev => prev + 1); }, []); // Стабильная ссылка на функцию return ; }Правильное использование ключейjavascript// Плохо - индекс как ключ {items.map((item, index) => ( ))} // Хорошо - уникальный ID {items.map(item => ( ))}2. Оптимизация состоянияЛокализация состоянияjavascript// Плохо - состояние в родителе function Parent() { const [inputValue, setInputValue] = useState(''); return (

); } // Хорошо - состояние в компоненте function Input() { const [value, setValue] = useState(''); return setValue(e.target.value)} />; }Оптимизация структуры состоянияjavascript// Плохо - вложенные объекты const [user, setUser] = useState({ profile: { name: '', age: 0 }, settings: { theme: 'light' } }); // Лучше - нормализованное состояние const [userName, setUserName] = useState(''); const [userAge, setUserAge] = useState(0); const [theme, setTheme] = useState('light');3. Оптимизация загрузки приложенияКод-сплиттинг и ленивая загрузкаjavascript// Динамический импорт const LazyComponent = lazy(() => import('./LazyComponent')); function App() { return ( Загрузка...}> ); } // Разделение по маршрутам const Home = lazy(() => import('./Home')); const About = lazy(() => import('./About'));Предзагрузка компонентовjavascript// Предзагрузка при наведении function Navigation() { const preloadAbout = () => { import('./About'); }; return ( ); }4. Оптимизация работы со спискамиВиртуализация больших списковjavascriptimport { FixedSizeList as List } from 'react-window'; function VirtualizedList({ items }) { return ( {({ index, style }) => (

{items[index].name}

)} ); }Пагинация и бесконечный скроллjavascriptfunction ItemList() { const [items, setItems] = useState([]); const [page, setPage] = useState(1); const loadMore = useCallback(() => { fetchItems(page).then(newItems => { setItems(prev => [...prev, ...newItems]); setPage(prev => prev + 1); }); }, [page]); return (

{items.map(item => )}

); }5. Инструменты и техники отладкиПрофилирование производительностиjavascript// React DevTools Profiler function App() { return ( ); } function onRenderCallback( id, phase, actualDuration, baseDuration, startTime, commitTime ) { console.log('Время рендеринга:', actualDuration); }Использование хуков для отладкиjavascriptfunction useWhyDidYouUpdate(name, props) { const previousProps = useRef(); useEffect(() => { if (previousProps.current) { const allKeys = Object.keys({ ...previousProps.current, ...props }); const changes = {}; allKeys.forEach(key => { if (previousProps.current[key] !== props[key]) { changes[key] = { from: previousProps.current[key], to: props[key] }; } }); if (Object.keys(changes).length) { console.log('[why-did-you-update]', name, changes); } } previousProps.current = props; }); }6. Оптимизация сборкиАнализ бандлаjavascript// package.json { "scripts": { "analyze": "source-map-explorer 'build/static/js/*.js'", "build": "react-scripts build" } }Удаление неиспользуемого кодаjavascri