React Memo: повышение производительности реагирования с простой меморизацией

]

] Введение

]

React Приложения часто имеют дело с большими наборами данных и сложными компонентами, где ненужные повторные рестораны могут значительно повлиять на производительность. Чтобы решить это, React предлагает React.Memo - простой, но мощный инструмент для оптимизации компонентов и сокращения времени рендеринга. В этом руководстве мы рассмотрим, как работает React Memo, почему это полезно и как его реализовать шаг за шагом.

]

---

]

] Что такое React Memo?

]

React.memo-это компонент высшего порядка (HOC) в React, который помогает запомнить функциональные компоненты. Мемонизация - это процесс кэширования вывода функции на основе ее входов, поэтому функция не должна пересекать результат для тех же входов. React Memo работает аналогичным образом: он «помнит» последний визуализированный вывод компонента и повторно использует его только при изменении его реквизита.

]

] Зачем реагировать память?

]

в React, компоненты повторно рендеринг всякий раз, когда их родительские компоненты повторно рендеринг. Это может вызвать неэффективность, если вывод компонента не зависит от изменений в его родителе. Например, в сложных интерфейсах со многими компонентами вы можете увидеть задержку из-за чрезмерных повторных ресурсов. Использование React Memo может оптимизировать это, только обновляя компоненты, когда это необходимо.

]

---

]

] Проблемы реагируют, решает

]

] 1. ненужные повторные ресурсы

]

, когда родительский компонент повторно воспроизводит, его дочерние компоненты также повторно рендеринг. Это может привести к узким месту производительности, особенно когда компоненты отображают статические данные или полагаются на неизменные реквизиты.

]

] 2. Запада или медленная производительность в сложных интерфейсах

]

приложения с глубоко вложенными компонентами могут столкнуться с медленной производительностью из-за кумулятивных повторных ресурсов. Мемонизация, с React Memo, помогает предотвратить повторные ресурсы компонентов, которые не требуют обновлений, повышая отзывчивость приложения.

]

---

]

] Как работает React Memo: пошаговый пример

]

давайте пройдемся через базовую реализацию React Memo. Мы начнем с простого компонента, который не использует память и посмотрим, как добавление React Memo имеет значение.

] Шаг 1: Установите простой счетчик -компонент без реагирования

]

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

]

] Объяснение

]

В этом примере каждый раз, когда вы вводите поле ввода, компонент-компонент повторно использует компоненты, даже если значение счета остается неизменным. Это ненужный повторный рендеринг, который мы можем предотвратить с React Memo.

]

] Шаг 2: Оптимизация с MEMO React

]

]
import React, {usestate} от 'React'; const counter = React.memo (функция счетчика ({count}) { console.log ('counter-компонент повторный рендеринг'); return

count: {count}

; }); function app () { const [count, setCount] = usEState (0); const [text, setText] = usEState (''); возвращаться ( ); } Экспортное приложение по умолчанию; ]

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

]

с React.memo, счетчик-компонент повторно использует только в случае изменения его подсчета. Теперь ввод в поле ввода больше не запускает повторную рендеринг счетчика, значительно оптимизируя производительность.

]

] React Memo в действии: практическое сценарий со списками

---

]

давайте погрузимся в более сложный пример, чтобы увидеть реальные преимущества React Memo. Предположим, у нас есть список элементов с кнопкой «Like» рядом с каждым элементом. Мы продемонстрируем, как React Memo может предотвратить чрезмерные повторные ресурсы при любви отдельных элементов.

]

] Шаг 1: Создайте компонент списка без памятки

]

import React, {usestate} от 'React'; Элемент функции ({item, on onlike}) { console.log (`рендеринг $ {item.name}`); возвращаться (

{item.name}

Onlike (item.id)}> как

); } function itemlist () { const [items, setItems] = usEState ([[[[[[[[[[[[[[[[[[[[[[[[[[[[ {id: 1, имя: 'item 1', likes: 0}, {id: 2, имя: 'пункт 2', лайки: 0}, {id: 3, name: 'item 3', likes: 0}, ]); const handlelike = (id) => { setItems ((previtems) => previtems.map ((item) => item.id === ID? {... пункт, лайки: item.likes 1}: item ) ); }; возвращаться (

{item.map ((item) => ( ))}

); } Экспорт Itemlist по умолчанию;

]

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like
    
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes   1 } : item
      )
    );
  };

  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

export default ItemList;

]

в приведенном выше коде, когда вам нравится один элемент, все элементы повторно рендеринг, хотя только один элемент лайки изменения.

]

] Шаг 2: Оптимизируйте компонент элемента с React Memo

]

const item = React.memo (элемент функции ({item, on onlike}) { console.log (`рендеринг $ {item.name}`); возвращаться (

{item.name}

Onlike (item.id)}> like ({item.likes})

); });

]

const Item = React.memo(function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like ({item.likes})
    
  );
});

]

теперь только тот элемент, который вам нравится, будет повторно, что делает пользовательский интерфейс намного быстрее и эффективнее.

]

]

] Когда использовать React Memo?

---

]

React Memo полезен в конкретных сценариях, но использование его везде может усложнить ваш код без добавления реальной выгоды. Вот некоторые ключевые ситуации, где это может быть особенно эффективным:

]

]

]

статические компоненты
1. : компоненты, которые не часто меняются, как заголовки или нижние колонтитулы. ]
чистые функциональные компоненты
2. : компоненты, которые зависят исключительно от реквизита для рендеринга. ] ]
большие списки компонентов
3. : списки со многими элементами, которые должны избегать ненужных повторных ресурсов. ] ]
]

] Потенциальные ловушки и лучшие практики

---

]

]

1. мелкое сравнение

   : React Memo выполняет мелкое сравнение, что означает, что оно не обнаружит изменения в глубоко вложенных объектах или массивах. Подумайте об использовании USEMEMO или USECALLBACK, если вы передаете сложные опоры. ]

2. мониторинг производительности

   : Использовать React Devtools, чтобы определить, какие компоненты на самом деле выигрывают от меморизации. Чрезмерное использование React Memo может привести к сложности кода с незначительным повышением производительности.

   ]
]

] Часто задаваемые вопросы (FAQ)

---

]

] Q1: Чем отличается React Memo от Usememo и UseCallback?

]

]

]

React Memo
• оптимизирует повторные воспроизведения компонентов на основе реквизита. ] ]
usememo
• Кэши вычисленных значений в компоненте. ]
useCallback
• Функции кэша, не давая их воссозданию на каждом рендере. ] ]
] Q2: Могу ли я использовать React Memo с классовыми компонентами?

]

нет, React Memo предназначен только для функциональных компонентов. Однако для компонентов класса аналогичное поведение может быть достигнуто с помощью PureComponent.

]

]

] Заключение

---

]

React Memo является ценным инструментом для уменьшения ненужных повторных ресурсов и повышения производительности приложения React. Избирательно используя его на чистых функциональных компонентах или статических элементах пользовательского интерфейса, вы можете оптимизировать свое приложение React, не усложняя его структуру. Следуйте этим шагам, попробуйте примеры и продолжайте экспериментировать, чтобы найти лучшие стратегии меморизации для вашего проекта!

]

]

]