Прокачайте навыки разработки на 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.

Читайте также:

Читайте нас в Telegram, VK и Дзен


Перевод статьи Oliver: 10 Expert Performance Tips Every Senior JS React Developer Should Know

Предыдущая статьяПравила PRISM на языке Python
Следующая статьяОсвоение функциональных возможностей Kotlin