Вредит ли производительности использование хуков React redux в списке? - PullRequest
Новая
       2

Вредит ли производительности использование хуков React redux в списке?

0 голосов
/ 18 июня 2020

Этот вопрос конкретно о новых перехватчиках React redux, особенно useSelector и useDispatch. Предположим, у вас есть один компонент, который является списком, а другой компонент - элементом списка. Компонент списка содержит список элементов списка.

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

Следует ли использовать эти перехватчики в самих элементах или использовать перехватчики в компоненте родительского списка и передавать функции хранения и отправки элементам через свойства? Оказывает ли какое-то влияние на производительность выполнение перехвата useDispatch и useSelector для каждого элемента в списке?

Отредактируйте, чтобы добавить пример кода: 

const List = () => (
  <div>
      {someArray.map((item) => {
        return (
          <ListItem/>
        );
      })}
  </div>
);

const ListItem = () => {
  const myState = useSelector((state) => state);
  const dispatch = useDispatch();
  // Do these here or in the parent and pass down as props?


  return (
      <div />
  );
};

1 Ответ

1 голос
/ 18 июня 2020

Никогда не возникает проблем с перфомансом при вызове useDispatch() в любом месте, поскольку это не приводит к повторному рендерингу компонентов.

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

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

Оба параметра " «выбрать все данные в родительском» и «выбрать идентификаторы элементов в родительском элементе, выбрать элементы по идентификатору в дочерних элементах» являются жизнеспособными. Если данные в списке могут обновляться довольно часто, вам, вероятно, следует предпочесть выбирать элементы по идентификатору внутри каждого компонента списка.

Однако, если родительский элемент также выполняет повторную визуализацию при изменении любого из отдельных элементов, это приведет к принудительному повторному рендерингу всех компонентов элемента списка, если вы не оптимизируете их активно (например, заключите элементы списка в React.memo()).

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

Подробнее см. мои сообщения:

...