Производительность - это обычная вещь, с которой каждый разработчик может столкнуться в какой-то момент после создания приложения. Мы проектируем, кодируем и строим систему, которая идеально работает в нашей системе, но когда она идет в производство или после того, как мы развертываем систему, она на самом деле кажется медленнее, чем при разработке.
Так почему же разрабатываемое приложение кажется быстрее, чем производственное?
Во время разработки все наши файлы размещаются на нашем локальном компьютере или на нашем собственном компьютере, который находится в порту 3000 (в React). Для нас очень эффективно и быстро загружать все наши пакеты и файлы, потому что мы просто разрабатывали локально, и скорость действительно высокая там, где скорость подключения к Интернету не имеет значения. Но в производственной среде Интернет представляет собой большую проблему, особенно если мы создаем приложение для страны, в которой очень медленное Интернет-соединение.
Не поддавайтесь на подсказки и уловки!
«Оптимизация производительности всегда требует затрат, но не всегда приносит пользу»
Итак, не оптимизируйте свой код заранее или до того, как он действительно понадобится, не пишите код производительности и не поддавайтесь всем советам и приемам производительности, которые мы читаем по всему Интернету без надлежащего причина для этого. Мы оптимизируем код только тогда, когда есть производство, или мы действительно чувствуем, что какая-то строка кода замедляется, если это не является обязательным. Мы не должны с энтузиазмом оптимизировать наш код и реализовывать то, что читаем без необходимости.
Почему ?? Не реализовывать уловки
Возможно, ваш код не замедлит начать оптимизацию. Оптимизируем код, в первую очередь измеряя его. Если мы не измеряем и не приступим к оптимизации, прекратите это делать. Выполняйте оптимизацию только тогда, когда вы замечаете, что приложение начинает работать медленнее, и вы замечаете, что это проблема. Прежде чем искать возможное решение, выясните, почему он замедляется.
Не оптимизируйте приложение слишком сильно, потому что когда мы оптимизируем код, на самом деле он становится медленнее. Оптимизация кода означает добавление строк кода, где каждая строка кода имеет свою стоимость.
useCallback | Крюк
useCallback помогает запоминать функцию, которую мы оборачиваем.
В REACT, когда родительский компонент повторно отрисовывается внутри родителя, дочерний компонент также повторно отрисовывается. При каждом повторном рендеринге дочерний компонент будет повторно выполнять свои функции. Используя функцию обратного вызова, повторное выполнение функции решит проблему.
Пример 1.1:
import React, { useState} from "react";
const collections = new Set();
const App = () => {
const [num, setNum] = useState(0);
const displayLog = () => console.log("I am re-rendering");
console.log(collections);
const add10 = () => {
setNum(num + 10);
};
collections.add(displayLog);
return (
<React.Fragment>
{num}<br />
<button onClick={add10}>Add value by 10</button>
<button onClick={displayLog}>Show Name</button>
</React.Fragment>
);
};
export default App;
Как видно из приведенной выше консоли, чем чаще мы нажимаем кнопку, компонент получает повторный рендеринг и вызываются функции, что для нас не нужно и дорого. Итак, чтобы предотвратить этот ненужный вызов функции, мы запомнили ее.
Пример 1.2 (после реализации обратного вызова)
import React, { useState, useCallback } from "react";
const collections = new Set();
const App = () => {
const [num, setNum] = useState(0);
const displayLog = useCallback(() => console.log("I am rendering" ), []);
const add10 = () => {
setNum(num + 10);
};
collections.add(displayLog);
console.log(collections);
return (
<React.Fragment>
{num}
<button onClick={add10}>Add value by 10</button>
<button onClick={displayLog}>Show Name</button>
</React.Fragment>
);
};
export default App;
Как мы видим в консоли, ненужного повторного рендеринга больше нет благодаря хуку useCallback.
useMemo | Крюк
useMemo возвращает мемоизированное значение.
Он подходит для обработки большого количества данных, то есть сложных математических вычислений или любой сложной задачи, для расчета которой требуется время. Во-первых, он будет работать при первом рендеринге, а затем при каждом повторном рендеринге отображать кешированную версию, а не вычислять сложный расчет снова и снова.
Пример 2.1:
import React, { useState } from "react";
const App = () => {
const [num, setNum] = useState(0);
const add10 = () => {
setNum(num + 10);
};
const complexFunctions = () => {
console.log("I am doing complex task zZZZZZ");
return (num + 2 * 2 * 99999 * 999999 * 999999 * 99999) / 0.213123123123123;
};
const randomClick = () => {
console.log("Random button is clicked");
setNum(num - 10);
};
return (
<>
{num}
<button onClick={add10}>Add value by 10</button>
<button onClick={randomClick}>Random button</button>
<br />
Complex Value: {complexFunctions()}
</>
);
};
export default App;
Как мы видим, ненужные сложные вычисления выполняются снова и снова, что дорого обходится, если эта функция занимает больше секунды. Итак, чтобы избавиться от этих ненужных вычислений, мы запомнили значение с помощью useMemo.
Пример 2.2:
import React, { useState, useMemo } from "react";
const collections = new Set();
const App = () => {
const [num, setNum] = useState(0);
const [num2, setNum2] = useState(0);
const add10 = () => {
setNum(num + 10);
};
const complexFunctions = useMemo(() => {
console.log("I am doing complex task zZZZZZ");
return (num + 2 * 2 * 99999 * 999999 * 999999 * 99999) / 0.213123123123123;
}, [num]);
const randomClick = () => {
console.log("Random button is clicked");
setNum(num2 * 10);
};
return (
<>
{num}
<button onClick={add10}>Add value by 10</button>
<button onClick={randomClick}>Random button</button>
<br />
Complex Value: {complexFunctions}
</>
);
};
export default App;
Как мы видим ... complexFunctions () не вызывается из-за хуков useMemo, которые очень эффективны для сложных вычислений.
Спасибо за чтение :)
Следуй за мной: beevekmgrz
