Вы должны сделать это также!

1. Преобразование массивов в объекты или карты

Превращение в Объекты всегда было моим первым выбором.

Когда его использовать?

У вас компонент customSelect вместо нативного, он принимает в качестве опций массив объектов, объекты имеют ключи label и value . По-видимому, как только пользователь выбрал значение, вы должны отобразить метку на основе его значения.

Я полагаю, что вашей первоначальной мыслью будет использование find или findIndex . Если пользователь выбрал 1000-е значение, он будет повторяться 1000 раз, чтобы получить правильную метку.

Между тем, объекту потребуется 0 миллисекунд, чтобы получить метку, если значение является его ключом. Не верит? Оформить заказ ниже для эксперимента:

Вот фрагмент для метода toObject:

type Dictionary<TValue> = {
  [key: string | number]: TValue;
};

const toObject = <T>(
  arr: Array<T>,
  key?: string | boolean,
): Dictionary<T> => {
  return arr.reduce((acc, each: T | Dictionary<T>, idx) => {
    if (!each) return acc;
    if (key === true) {
      acc[idx] = each as T;
    } else if (key && (each as Dictionary<T>)[key]) {
      acc[(each as never)[key]] = each as T;
    } else {
      acc[JSON.stringify(each)] = each as T;
    }
    return acc;
  }, {} as Dictionary<T>);
};

Когда не использовать?

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

Дальнейшее чтение

Недавно я прочитал статью Используйте больше карт и меньше объектов. Я просто понимаю, что Map работает лучше.

2. Прослушиватель событий делегирования

Делегирование событий — это метод в JavaScript, который включает присоединение прослушивателя событий к родительскому элементу, а не к отдельным дочерним элементам. Когда событие инициируется для дочернего элемента, оно передается родительскому элементу, который может обрабатывать событие от имени дочернего элемента.

График выше показывает, что каждый li имеет свой собственный прослушиватель событий и разные прослушиватели событий, слушающие один и тот же обработчик. Что приведет к высокому потреблению памяти. Однако это можно реорганизовать.

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

Как мы знаем, в JavaScript событие всплывает (распространяется) в иерархии дерева DOM. Когда вы щелкаете элемент li, в конце концов ul получит событие click .

Почему вас это должно волновать?

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

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

Пример

import React, { useState } from "react";

function MyComponent() {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleItemClick = (event) => {
    const { id } = event.target.dataset;
    const itemIndex = selectedItems.indexOf(id);
    if (itemIndex === -1) {
      setSelectedItems([...selectedItems, id]);
    } else {
      setSelectedItems([
        ...selectedItems.slice(0, itemIndex),
        ...selectedItems.slice(itemIndex + 1),
      ]);
    }
  };

  return (
    <div onClick={handleItemClick}>
      <div data-id="item1">Item 1</div>
      <div data-id="item2">Item 2</div>
      <div data-id="item3">Item 3</div>
    </div>
  );
}

В этом примере мы используем делегирование событий для обработки кликов по дочерним элементам родительского элемента div. При щелчке элемента div вызывается функция handleItemClick с событием щелчка.

Затем функция handleItemClick использует свойство event.target, чтобы определить, какой дочерний элемент был нажат, используя атрибут data-id для идентификации элемента. Затем он обновляет состояние selectedItems, чтобы отразить выбранный элемент.

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

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.