ReactJS - Использование useMemo: Пособие для начинающих

Здравствуйте,野心勃勃ые разработчики React! Сегодня мы погрузимся в один из мощных хуков React: useMemo. Не волнуйтесь, если вы новички в программировании; я шаг за шагом проведу вас через это понятие, как я уже сделал для countless студентов за годы моей преподавательской деятельности. Так что возьмите杯咖啡 (или чай, если это ваше дело), и отправимся в это увлекательное путешествие вместе!

Что такое useMemo?

Прежде чем мы углубимся в детали, давайте поймем, что такое useMemo. Представьте, что вы печетеcookies (мне нравится эта аналогия, потому что кто же не любитcookies?). У вас есть рецепт, который требует некоторых сложных вычислений для определения идеального количества巧克力ных chips. Теперь, вы будете пересчитывать это каждый раз, когда будете печьcookies, или запишете это и будете использовать повторно? Вот что делает useMemo – он запоминает (или "кашлит") результат вычисления, чтобы вам не пришлось делать это заново.

В терминах React, useMemo – это хук, который позволяет вам кэшировать результат вычисления между ререндерами. Это как иметь超级-умного ассистента, который запоминает сложные задачи за вас!

Сигнатура хука useMemo

Давайте посмотрим, как мы на самом деле используем хук useMemo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Не паникуйте! Я знаю, что это может показаться немного пугающим в начале, но давайте разберем это:

1. useMemo – это имя нашего хука.
2. Он принимает два аргумента:

• Функция, которая выполняет是我们的 вычисление (() => computeExpensiveValue(a, b))
• Массив зависимостей ([a, b])

3. Он возвращает кэшированное значение.

Подумайте об этом так: useMemo говорит: "Эй, React, перезапускай это вычисление только если a или b изменились. В противном случае, дай мне результат, который ты запомнил в прошлый раз."

Применение хука useMemo

Теперь давайте увидим useMemo в действии с реальным примером. Представьте, что мы создаем корзину покупок для интернет-магазина (потому что кто же не любит шопинг онлайн?).

import React, { useMemo, useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React Футболка", price: 20 },
{ id: 2, name: "React Худи", price: 40 },
{ id: 3, name: "React Кепка", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Вычисление общей суммы...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>Ваша корзина покупок</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Итого: ${totalPrice}</h3>
</div>
);
}

Давайте разберем это:

1. У нас есть корзина с некоторыми товарами, каждый из которых имеет имя и цену.
2. Мы используем useMemo для вычисления общей суммы всех товаров в корзине.
3. Вычисление перезапускается только если cart изменился (это делает [cart] в конце).
4. Мы отображаем каждый товар и общую сумму.

Теперь, почему это полезно? Представьте, что вычисление общей суммы было бы真的很 сложной операцией (может быть, involving скидки, налоги и т.д.). Без useMemo, React будет пересчитывать это каждый раз при ререндере компонента, даже если корзина не изменилась. С useMemo, он пересчитывает только при необходимости, потенциально экономя много времени на обработку!

Сохранение ссылок

Другая超级-классная особенность useMemo – его способность сохранять ссылки. "Что это?" – спросите вы. Ну, позвольте мне объяснить еще одним примером.

Представьте, что вы создаете приложение для списка задач (потому что каждый программист когда-то создавал одно из таких, доверяйте мне!). Вы хотите отфильтровать свои задачи по их статусу.

import React, { useMemo, useState } from 'react';

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Изучить React", completed: false },
{ id: 2, text: "Создать классные приложения", completed: false },
{ id: 3, text: "Изменить мир", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Фильтрация задач...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2>Мой список задач</h2>
<button onClick={() => setFilter('all')}>Все</button>
<button onClick={() => setFilter('active')}>Активные</button>
<button onClick={() => setFilter('completed')}>Завершенные</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

В этом примере:

1. У нас есть список задач и состояние фильтра.
2. Мы используем useMemo для создания отфильтрованного списка задач на основе текущего фильтра.
3. Отфильтрованный список перерассчитывается только если todos или filter изменились.

Чудо здесь в том, что filteredTodos всегда будет одним и тем же объектом,除非 todos или filter изменяются. Это super важно для оптимизации производительности, особенно когда вы передаете этот список в дочерние компоненты.

Заключение

И вот мы arrived, друзья! Мы отправились в путешествие по useMemo, от понимания его базового принципа до использования его в реальных примерах. Помните, useMemo – это ваш надежный помощник, всегда готовый помочь вам оптимизировать ваши приложения React, избегая ненужных вычислений.

Вот quick справочный стол методов, которые мы рассмотрели:

Метод	Цель	Синтаксис
useMemo	Кэшировать дорогостоящие вычисления	useMemo(() => computation, dependencies)

Как и с любым инструментом в программировании, используйте useMemo с умом. Он великолепен для оптимизации производительности, но чрезмерное его использование может сделать ваш код более сложным без значительных преимуществ. Как я всегда говорю своим студентам: "С великой силой приходит великая ответственность!"

Продолжайте практиковаться, продолжайте создавать, и, самое главное, получайте удовольствие от React. Before you know it, вы будете создавать приложения, которые даже опытные разработчики будут говорить "Вау!" И помните, если вы когда-нибудь застрянете, просто представьте, что вы объясняете свой код резиновой уточке. Это работает чудеса, trust me!

Счастливого кодирования, будущие мастера React!

Credits: Image by storyset