Обновление состояния Redux, приводящее к ненужной визуализации компонента React - PullRequest
Новая
       22

Обновление состояния Redux, приводящее к ненужной визуализации компонента React

0 голосов
/ 28 июня 2018

У меня возникло несколько проблем с производительностью в моем приложении «Реакция / редукция».

Я работаю с объектом в одном из моих редукторов, который довольно глубокий. Он содержит объект с именем list, который содержит коллекцию объектов. 

const state = {
  list: {
    one: {
      id: 'one',
      name: 'One',
      active: false
    },
    two: {
      id: 'two',
      name: 'Two',
      active: false
    }
  }
}

Каждый элемент в объекте используется для визуализации компонента. Этот компонент будет иметь доступ к свойствам элемента следующим образом: 

const List = (props) => {
  const listItems = Object.keys(props.list).map((key) => {
    const item = props.list[key];
    return (
      <Item key={item.id} active={item.active}>
        {item.name}
      </Item>
    );
  });

  return <ul>{listItems}</ul>;
};

Однако каждый раз, когда я запускаю следующий код, мой компонент (который является PureComponent) рендерится. 

case UPDATE_LIST_ITEM:
  return {
    ...state,
    list: {
      ...state.list,
      [payload.itemId]: {
        ...state.list[payload.itemId],
      },
    },
  };

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

Я не уверен, что здесь можно сделать. Это хорошее время для реализации библиотеки, как Immutable.js?

Обновление:

Также (я не слишком уверен, помогает ли это, но), следующее обновление с использованием редуксов не вызывает рендеринг моего компонента: 

case UPDATE_LIST_ITEM:
  return {
    ...state,
    list: {
      ...state.list,
      [payload.itemId]: state.list[payload.itemId],
    },
  };

1 Ответ

0 голосов
/ 28 июня 2018

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

Если вы не хотите, чтобы ваш компонент повторно отображался при каждом изменении состояния, вы можете контролировать это с помощью обновления компонента до класса и контролировать, когда и когда он не должен отображаться. shouldComponentUpdate(nextProps, nextState)

Реакция документов

...