Redux: Производительность списка подключенных компонентов

Question

У меня есть <List> подключенный компонент, который передает множество атрибутов <ListItem> компонентам. Достигается тот момент, когда необходим рефакторинг, потому что передается слишком много атрибутов.

Предположим, я переворачиваю таблицу и вместо этого делаю <ListItem> подключенным компонентом, так что мне не нужно передавать столько атрибутов вниз. Могу ли я ожидать снижения производительности или улучшения производительности рендеринга пользовательского интерфейса?

Я немного прочитал, но не смог найти точного ответа на мой вопрос.

Answer 1

Чтобы расширить ответ @Bhojendra Rauniyar на ваш точный вопрос: пропуск реквизита не замедляет React, поскольку он не копирует информацию, а просто создает указатель на него, который действительно дешев. Javascript работает в целом так, например:

a = {foo:'bar'}
b = a
b.foo = "another bar"
console.log(a.foo)
    > "another bar"

Javascript переработал ссылку на a.foo, а не скопировал ее на b.foo. Таким образом, изменение b.foo также изменилось a.foo.

Answer 2

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

Пожалуйста, ознакомьтесь с записями FAQ по Redux о производительности и о подключении нескольких компонентов , а также в моем блоге Практическое Redux, часть 6: Подключенные списки и производительность для получения дополнительной информации подробности.

Answer 3

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

<List myProp={myProp} {...rest} />

Это отправит один реквизит myProp, а все остальные реквизиты существуют в rest реквизитах.

Или вы можете передать все реквизиты:

<List {...props} />

В компоненте ListItem:

const { myOtherProp1, myOtherProp2 } = props
<ListItem myOtherProp1={myOtherProp1} myOtherProp2={myOtherProp2} />

---

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

List.defaultProps = {
  myOtherProp3: 'My default prop 3'
  myOtherProp10: 'My default prop 10'
}

Таким образом, вы пропускаете все реквизиты, но используете их, когда вам нужно их использовать.

---

Чтобы ответить на ваш точный вопрос:

Нет. Там не будет никакого удара производительности. Там нет предела реквизита. Вы можете передать столько, сколько хотите. Принимающий компонент получит все реквизиты из одного источника props.