{"draftJsState":{"blocks":[{"data":{"image":{"id":"647cf32773d3456376ea6909"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4sfi5"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"4ph97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Использование React.memo (HOC, а не хук)","type":"header-three","key":"2plsv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { memo } from 'react'\n\ninterface Props {\n title: string\n subtitle: string\n}\n\nconst MyComponent: React.FC = memo(({ title, subtitle }) => {\n return (\n

{title}

{subtitle}

\n )\n})","type":"blockquote","key":"2v1gj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React.memo — это компонент высшего порядка (HOC), который можно использовать для предотвращения ненужных повторных рендерингов функциональных компонентов.","type":"unstyled","key":"19qhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обернув компонент в React.memo, вы обеспечите его повторный рендеринг только при изменении его пропсов. Это особенно полезно при работе со сложными компонентами, которые требуют больших затрат на рендеринг.","type":"unstyled","key":"5qbrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Оптимизация обработчиков событий с помощью useCallback","type":"header-three","key":"drm1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState, useCallback } from 'react'\n\nconst Counter: React.FC = () => {\n const [count, setCount] = useState(0) const increment = useCallback(() => {\n setCount(prevCount => prevCount + 1)\n }, [])\n\n return (\n

Count: {count}

\n \n

\n )\n}","type":"blockquote","key":"bgf1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя хук useCallback, можно мемоизировать обработчики событий, обеспечивая таким образом их изменение только при изменении зависимостей, указанных в массиве зависимостей. Это предотвращает ненужные повторные рендеринги дочерних компонентов, которые зависят от мемоизированных обработчиков событий.","type":"unstyled","key":"9herb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Виртуализация длинных списков с помощью react-window","type":"header-three","key":"6u3li"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React from 'react'\nimport { FixedSizeList as List } from 'react-window'\n\nconst Row: React.FC<{ index: number; style: React.CSSProperties }> = ({\n index,\n style,\n}) => {\n return (\n

{`Row ${index}`}

\n )\n}\n\nconst VirtualizedList: React.FC = () => {\n const itemCount = 1000\n return (\n \n {Row}\n \n )\n}","type":"blockquote","key":"9pdlq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно оптимизировать производительность рендеринга длинных списков и таблиц. С помощью react-window можно эффективно отрендерить большой список, и при этом будут отображаться только видимые элементы, а количество создаваемых и обновляемых элементов DOM сократится. Эта техника, известная как “оконное управление” (“windowing”) или “виртуализация”, способна значительно повысить производительность.","type":"unstyled","key":"4cihd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Ленивая загрузка компонентов с помощью React.lazy и Suspense","type":"header-three","key":"72hsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { lazy, Suspense } from 'react'\nconst LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'))\n\nconst App: React.FC = () => {\n return (\n

\n Loading...

}>\n \n \n \n )\n}","type":"blockquote","key":"7plm8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ленивая загрузка — это техника оптимизации, которая откладывает загрузку некритичных компонентов до тех пор, пока они не понадобятся. С помощью React.lazy и Suspense можно легко реализовать ленивую загрузку для компонентов. Это позволит значительно улучшить время начальной загрузки приложения за счет уменьшения количества JavaScript, который необходимо загрузить и распарсить.","type":"unstyled","key":"bv3sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. Использование API React.Profiler для выявления узких мест производительности","type":"header-three","key":"d44tm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { Profiler } from 'react'\n\nconst onRender = (\n id: string,\n phase: 'mount' | 'update',\n actualDuration: number,\n baseDuration: number,\n startTime: number,\n commitTime: number,\n interactions: Set<{ id: number; name: string; timestamp: number }>\n) => {\n console.log('Profiler:', {\n id,\n phase,\n actualDuration,\n baseDuration,\n startTime,\n commitTime,\n interactions,\n })\n}\n\nconst App: React.FC = () => {\n return (\n \n \n \n )\n}","type":"blockquote","key":"4aciu"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":16,"offset":0},{"key":2,"length":14,"offset":16}],"inlineStyleRanges":[],"text":"API для работы сReact.Profiler позволяет измерять производительность компонентов путем сбора информации о тайминге по каждой фазе рендеринга.","type":"unstyled","key":"1s3ql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используя компонент Profiler, можно определить узкие места в производительности и соответствующим образом оптимизировать приложение.","type":"unstyled","key":"a74eb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"6. Оптимизация обновления состояний с помощью Immer","type":"header-three","key":"7aop3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState } from 'react'\nimport produce from 'immer'\n\ninterface User {\n id: number\n name: string\n}\n\nconst App: React.FC = () => {\n const [users, setUsers] = useState([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' },\n ])\n\n const updateUser = (id: number, newName: string) => {\n setUsers(\n produce((draftUsers: User[]) => {\n const user = draftUsers.find(user => user.id === id)\n if (user) {\n user.name = newName\n }\n })\n )\n }\n\n return (\n // ...\n )\n}","type":"blockquote","key":"abgt8"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":5,"offset":0},{"key":4,"length":13,"offset":63}],"inlineStyleRanges":[],"text":"Immer — это популярная библиотека, которая упрощает работу с неизменяемыми структурами данных в JavaScript. С помощью функции produce в Immer можно написать читаемую логику обновления состояния и гарантировать, что состояние останется неизменным. Это также предотвратит непредвиденные побочные эффекты и повысит производительность.","type":"unstyled","key":"32h2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"7. Использование троттлинга и дебаунсинга для обработчиков ввода","type":"header-three","key":"2tn5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import React, { useState, useCallback } from 'react'\nimport { debounce } from 'lodash-es'\n\nconst SearchBox: React.FC = () => {\n const [searchTerm, setSearchTerm] = useState('')\n\n const handleSearch = useCallback(\n debounce((value: string) => {\n setSearchTerm(value)\n }, 300),\n []\n )\n\n const handleChange = (event: React.ChangeEvent) => {\n handleSearch(event.target.value)\n }\n\n return (\n

\n \n

\n )\n}","type":"blockquote","key":"6ts4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Троттлинг и дебаунсинг — методы, используемые для ограничения скорости выполнения функции. Это родственные, но разные понятия в контексте компьютерных наук.","type":"unstyled","key":"btsq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Троттлинг — это прямое уменьшение скорости срабатывания. Дебаунсинг — техника поддержания частоты срабатывания ровно на 0 до периода покоя, а затем срабатывания слушателя ровно один раз.","type":"unstyled","key":"aof36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применяя эти техники к обработчикам ввода, можно сократить количество вызовов функций и повысить производительность, особенно при решении таких задач, как получение данных из API и фильтрация большого набора данных.","type":"unstyled","key":"aarl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В примере выше используется debounce из lodash-es, популярной библиотеки lodash, экспортируемой в виде ES-модулей для встряски дерева вызовов. Debounce ограничит скорость вызова функции handleSearch.","type":"unstyled","key":"6680a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"dlg7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы рассмотрели 7 методов оптимизации производительности для приложений React. Применение этих стратегий обеспечит безотказную и эффективную работу приложения, а значит — и превосходный пользовательский опыт. Помните, что производительность — это постоянная проблема, требующая непрерывного мониторинга и оптимизации приложения.","type":"unstyled","key":"d4vq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конечно, вы можете применять и другие стратегии оптимизации производительности. Однако эти 7 методов станут для вас прочным фундаментом при создании высокопроизводительных приложений React. Продолжайте учиться и экспериментировать.","type":"unstyled","key":"cl0rv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"6se1m"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":47,"offset":0}],"inlineStyleRanges":[],"text":"Обрабатываем ошибки в React: полное руководство","type":"unordered-list-item","key":"dkrg2"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":54,"offset":0}],"inlineStyleRanges":[],"text":"Совместное использование компонентов React с Webpack 5","type":"unordered-list-item","key":"3p2vh"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":36,"offset":0}],"inlineStyleRanges":[],"text":"Как создать приложение Todo на React","type":"unordered-list-item","key":"echgs"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":8,"offset":14},{"key":9,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"tuqj"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":16,"offset":15},{"key":11,"length":60,"offset":33}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Dr. Derek Austin: 7 React Performance Optimization Techniques You Can’t Ignore","type":"unstyled","key":"15cr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bvuou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"y8WjN55pMlMrbuVLZ1A1"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/17497/"},"mutability":"MUTABLE","type":"LINK"},"11":{"data":{"href":"https://medium.com/react-in-the-real-world/7-react-performance-optimization-techniques-you-cant-ignore-bc15c60e9a00","url":"https://medium.com/react-in-the-real-world/7-react-performance-optimization-techniques-you-cant-ignore-bc15c60e9a00"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://react.dev/reference/react/Profiler","url":"https://react.dev/reference/react/Profiler"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://react.dev/reference/react/Profiler","url":"https://react.dev/reference/react/Profiler"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://github.com/immerjs/immer","url":"https://github.com/immerjs/immer"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Immutable","url":"https://developer.mozilla.org/en-US/docs/Glossary/Immutable"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://nuancesprog.ru/p/17416/","url":"https://nuancesprog.ru/p/17416/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://nuancesprog.ru/p/15900/","url":"https://nuancesprog.ru/p/15900/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://nuancesprog.ru/p/15922/","url":"https://nuancesprog.ru/p/15922/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://medium.com/@doctorderek","url":"https://medium.com/@doctorderek"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}