Шаблон и производительность Redux селектора

Question

Я наткнулся на эту ссылку, которая кратко описывает преимущества шаблона селектора Redux:

https://gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170

Они предоставляют пример вызова фильтрации внутри mapStateToProps:

function mapStateToProps(state) {
  return {
    incompleteItems: getIncompleteItems(state)
  }
}

Однако, так как mapStateToProps вызывается всякий раз, когда изменяется состояние, даже если изменение полностью не связано со списком элементов, не снижается ли в этом случае производительность?не лучше ли провести фильтрацию внутри редуктора?

Спасибо.

Answer 1

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

1. Использование shouldComponentUpdate - Вы можете пойти дальше и реализовать метод жизненного цикла shouldComponentUpdate для своего компонента. Простая проверка изменений для реквизита и возвращение false, даст вам немедленные результаты.

2. Использовать неизменяемые структуры данных - Вы можете (и должны, по моему мнению) использовать неизменяемые структуры дат для своего приложения. Это не только поможет вам лучше разобраться в вашем приложении, но и отладит его. Использование неизменяемой структуры данных для ваших локальных состояний позволит использовать расширенные шаблоны запоминания и оптимизации. Проверьте immutable-js на Facebook для получения более подробной информации.

3. Моделирование состояния - Это не то, о чем мы, разработчик, много думаем, когда пишем наши супер классные приложения, но это стоит учитывать, думая в направлении перф. Поддержание повторного рендеринга локально с фактическими изменениями данных является болезненной задачей, и такие инструменты, как реселект, immutablejs и библиотеки управления побочными эффектами, такие как redux-saga и redux-thunk, очень помогают.

Надеюсь, это окажется полезным для вас! Не унывайте! ?

Answer 2

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

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

Now we can reuse this logic across many components mapping this exact state! We can unit test it as well! More importantly we can now memoize this state with reselect

в этом случае вы можете использовать reselect пакет

https://github.com/reactjs/reselect

и что позаботится о пересчете или n