использовать React.memo с сопоставленной коллекцией - PullRequest
Новая
       23

использовать React.memo с сопоставленной коллекцией

0 голосов
/ 02 июля 2019

Каким-то образом Resact.memo (или версия ловушки) не будет работать, когда компоненты «сгенерированы» картой.

Пример кода: https://codesandbox.io/embed/react-memo-example-iuqf4

const Item = ({ step }) => <div>{step.name}</div>;
    const MemoItem = React.memo(Item, (prevProps, nextProps) => {
       console.info("memo"); //no console
  if (prevProps.show === nextProps.show) {
    return true;
  }
  return false;
});

const initialSteps = [{
    name: "Pim",
    show: true
  }, {
    name: "Christa",
    show: false
  }, {
    name: "Henk",
    show: true
  }, {
    name: "klaas",
    show: true
  }];

{steps.steps.map((step, 
    <MemoItem key={index} step={step} />
))}

Мои ожиданиязаключается в том, что каждый визуализированный элемент «запоминается» (и отображается журнал в консоли).

1 Ответ

0 голосов
/ 02 июля 2019

Работает как положено. Функция сравнения на равенство запускается только для рендеров ПОСЛЕ первого рендеринга. Нет ничего, с чем "сравнивать" реквизиты на первом рендере, потому что именно тогда он запоминается. Таким образом, вы не видите лог "memo" в консоли - он рендерится один раз, но компонент приложения не рендерится, поэтому функция сравнения не вызывается.

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

class App extends Component {
  render() {
    const { steps } = this.props;
    return (
      <div onClick={() => {
        this.setState({ time: Date.now() })
      }}>
        {steps.steps.map((step, index) => (
          <MemoItem key={index} step={step} />
        ))}
      </div>
    );
  }
}

Изменить: Я укажу, что это почти наверняка бессмысленно для вас, чтобы сделать эту оптимизацию. React.memo существует для очень ограниченных случаев, когда повторное рендеринг компонентов вызывает серьезные проблемы с производительностью. Возможно, вы делаете это как упражнение в изучении React, но в подавляющем большинстве случаев собственных внутренних оптимизаций React более чем достаточно. Преждевременная оптимизация - это плохо!

...