Предотвратить Component / PureComponent с styled-компонентами от повторного рендеринга всех элементов после изменения состояния

Question

После добавления стилевых компонентов в этот пример мы заметили, что наш компонент списка обновляет все, когда изменяется только один элемент в состоянии.

Подсветка рендеринга списка (из React dev-tools) является чрезмерной при добавлении / удалении одной записи. Один элемент удаляется / добавляется, затем все элементы выделяются.

образцы кода

• GitHub: https://github.com/chancesmith/reactjs-optimize-list-updates/tree/master/src
• коды и флажки: https://codesandbox.io/s/wn45qw44z5

Вот пример правильного компонента списка (CategoryorizedList.js)

import styled from "styled-components";

const Item = styled.li`
  color: #444;
`;

class CategorizedList extends PureComponent {
  render() {
    return (
      <div>
        {this.props.categories.map(category => (
          <ul>
            <li key={this.props.catStrings[category]}>
              {this.props.catStrings[category]}
            </li>
            <ul>
              {this.props.items.map((item, index) =>
                item.category === category ? (
                  <div key={item.label + index}>
                    <Item>{item.label}</Item>
                  </div>
                ) : null
              )}
            </ul>
          </ul>
        ))}
      </div>
    );
  }
}

Предпочтение

Я бы предпочел использовать PureComponent, чтобы shouldComponentUpdate() обрабатывался автоматически .

Вопрос

Как мы можем убедиться, что только измененные объекты в состоянии items будут перерисованы?

Answer 1

Если данные изменятся, представление будет перерисовано.Это не должен быть дорогой процесс, так как это происходит один раз при добавлении / удаленииЕсли вы обнаружите проблемы с производительностью, это может быть вызвано чем-то другим.

В общем случае вы можете получить некоторый контроль над повторным рендерингом чистых компонентов: https://reactjs.org/docs/react-api.html#reactmemo