Прокачайте навыки разработки на React рекомендациями по повышению производительности в JavaScript. Узнайте, как оптимизировать код и повысить эффективность приложений React. Освойте эти приемы, чтобы выделиться в конкурентном мире веб-разработки.
1. useMemo
Когда выполняются дорогостоящие вычисления или преобразовываются данные, сохраняйте результат в памяти и предотвращайте ненужные повторные вычисления хуком useMemo
:
import React, { useMemo } from 'react';
const MyComponent = ({ data }) => {
const transformedData = useMemo(() => {
// Здесь выполняется дорогостоящее преобразование данных
return data.map(item => item * 2);
}, [data]);
return (
<div>
{/* Преобразованные данные используются здесь */}
</div>
);
};
2. useCallback
Когда функции обратного вызова передаются как свойства, запоминайте функцию и предотвращайте ненужные повторные отображения дочерних компонентов хуком useCallback
:
import React, { useCallback } from 'react';
const ParentComponent = () => {
const handleButtonClick = useCallback(() => {
// Здесь обрабатывается нажатие кнопки
}, []);
return (
<ChildComponent onClick={handleButtonClick} />
);
};
3. React.memo для оптимизации производительности
Чтобы оптимизировать функциональные компоненты, запоминайте компонент с помощью компонента высшего порядка React.memo
и, если свойства не изменились, предотвращайте повторные отображения:
import React from 'react';
const MyComponent = React.memo(({ prop1, prop2 }) => {
// Здесь компонент отображается
});
4. Виртуализированные списки для эффективного рендеринга
Виртуализированной библиотекой длинных списков вроде react-window
или react-virtualized
отображайте только видимые элементы, повышая этим производительность рендеринга:
import React from 'react';
import { FixedSizeList } from 'react-window';
const MyListComponent = ({ data }) => {
const renderRow = ({ index, style }) => {
const item = data[index];
return (
<div style={style}>{item}</div>
);
};
return (
<FixedSizeList
height={300}
width={300}
itemSize={50}
itemCount={data.length}
>
{renderRow}
</FixedSizeList>
);
};
5. Разделение кода для отложенной загрузки
Разбивайте код на мелкие фрагменты для их «ленивой» загрузки, используя динамический импорт и компоненты React lazy
и Suspense
, так сокращается время начальной загрузки, загружается только нужный код, и по мере необходимости:
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
};
6. Мемоизация для дорогостоящих вычислений
Это кэширование результатов дорогостоящих вызовов функций и возвращение кэшированного результата при повторном вводе тех же данных, из-за чего лишние вычисления сокращаются:
const memoizedExpensiveFunction = useMemo(() => {
// Здесь дорогостоящие вычисления
}, [input]);
7. Оптимизация отображения с React.Fragment
При рендеринге нескольких элементов без элемента-контейнера, чтобы избежать лишних DOM-узлов, применяйте React.Fragment
или сокращенный синтаксис <>...</>
:
import React from 'react';
const MyComponent = () => {
return (
<>
<div>Element 1</div>
<div>Element 2</div>
</>
);
};
8. Функциональные компоненты с хуками
Используйте их вместо компонентов с классами, код станет проще и эффективнее:
import React, { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleIncrement}>Increment</button>
<p>Count: {count}</p>
</div>
);
};
9. Встраиваемые функции
Избегайте их определения в методах рендеринга, при каждой отрисовке ими создается новая ссылка, что чревато лишними повторными отображениями дочерних компонентов:
import React, { useCallback } from 'react';
const ParentComponent = () => {
const handleButtonClick = useCallback(() => {
// Здесь обрабатывается нажатие кнопки
}, []);
return (
<ChildComponent onClick={handleButtonClick} />
);
};
10. React.PureComponent или React.memo для оптимизации производительности
Чтобы избежать ненужного повторного отображения компонентов при выполнении поверхностных сравнений свойств, применяйте React.PureComponent
или React.memo
:
import React, { PureComponent } from 'react';
class MyComponent extends PureComponent {
render() {
// Здесь компонент отображается
}
}
export default MyComponent;
Следуя этим рекомендациям, можно усовершенствовать эффективность и отзывчивость приложений ReactJS. Благодаря применению функциональной архитектуры, мемоизации, приемов разделения кода значительно повышается общая производительность компонентов React.
Читайте также:
- Обзор курса “Полное введение в React” от Frontend Masters
- Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 2
- 10 полезных методик во фронтенд-разработке React
Читайте нас в Telegram, VK и Дзен
Перевод статьи Oliver: 10 Expert Performance Tips Every Senior JS React Developer Should Know