"Переберите" VS "Memoize-One" с "React и Redux" - PullRequest
Новая
       32

"Переберите" VS "Memoize-One" с "React и Redux"

0 голосов
/ 15 октября 2018

Я пытаюсь использовать какое-то напоминание в своем рабочем процессе с React, и я ищу лучшее и самое главное "самое простое" решение для интеграции с моим рабочим процессом, которое включает React and Redux.

Я сталкивался со многими статьями, в которых говорилось о мемофикации в целом, и некоторые демонстрируют использование «memoize-one» и считают его самым быстрым и простым в настройке, а другие даже неупомяните об этом и поговорите о «повторном выборе».

Я просто хочу знать, что лучше и проще, а во что я должен инвестировать.

Ответы [ 3 ]

0 голосов
/ 13 декабря 2018

Я не использовал повторный выбор, но memoize-один отлично работает для меня, когда я хочу вычислить что-то из реквизита внутри рендера.Это отличный шаблон для выполнения дорогостоящей операции, такой как сопоставление большого массива, с реквизитами, которые могут меняться со временем, но могут и не меняться при некоторых повторных рендерингах.Это гарантирует, что дорогостоящая операция, используемая в рендере, пересчитывается только при изменении входных данных.Это также избавляет от необходимости использовать методы жизненного цикла, такие как getDerivedStateFromProps (если он может быть рассчитан из реквизита, он, вероятно, не должен находиться в состоянии). 

import memoize from 'memoize-one'

class Example extends Component {

  mapList = memoize(
    (list) => list.map(item => ({text: item.text}))
  )

  render() {
    // if this.props.list hasn't changed since the last render
    // memoize-one will re-use the last return value from cache
    const mappedList = this.mapList(this.props.list)

    return (
      ...
    )
  }
}

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

0 голосов
/ 17 декабря 2018

Обе библиотеки возвращают функцию , которая принимает заданное количество аргументов , а возвращает значение : 

getA(arg1, arg2, arg3) // Returns a value

Разница заключается в том, что происходит под колпаком при вызове функции .

memoize-one

  • собирать при условииаргументы
  • сравнивают аргументы с аргументами, предоставленными в предыдущем вызове (===)
  • аргументы равны одинаковы : возвращает кэшированный результат
  • аргументы равны НЕ одинаковы : пересмотреть функцию результата и вернуть

повторно выбрать

  • собрать предоставленные аргументы
  • запустить набор функции inputSelectors, предоставив им собранные аргументы
  • собирать inputSelectors возвращаемые значения
  • сравнить inputSelectors возвращаемые значения с полученными в предыдущемвызов (===)
  • значения равны одинаковы : вернуть кэшированный результат
  • значения являются НЕ одинаковыми : переоценить функцию результата и вернуть

Выводы

memoize-one - это служебная программа создания заметок на основе значений: памятка выполняется по значению при условии аргументов .

reselect добавляет поверх него еще один слой оценки: памятка НЕ выполняетсязначения аргументов, НО по результатам набора inputSelectors функций , снабженных этими начальными аргументами.

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

0 голосов
/ 18 октября 2018

Я предлагаю использовать reselect, так как он был специально разработан для использования с React / Redux.memoize-one больше похож на универсальную библиотеку напоминаний.

Очень просто использовать повторный выбор, он просто оборачивает ваши селекторы: 

import { createSelector } from 'reselect';

const shopItemsSelector = state => state.shop.items;

// without reselect
const subtotalSelector = state => {
  const items = shopItemsSelector(state);
  return items.reduce((acc, item) => acc + item.value, 0);
}

// with reselect
const subtotalSelector = createSelector(
  shopItemsSelector, // list the selectors you need
  items => items.reduce((acc, item) => acc + item.value, 0) // the last argument is actual selector
)
...