Выбранный элемент в списке в React

Question

Я хочу применить другой стиль для выбранного элемента из длинного списка.Я передаю элемент React как реквизиты: currentId и selectedId .Внутри функции рендеринга я сравниваю оба идентификатора и применяю надлежащие стили.

При нажатии на любой элемент из списка я запускаю действие с новым выбранным идентификатором, и все элементы в списке будут повторно отображаться (поскольку selectedId prop не изменяется).

Если в списке 1000 элементов, и я щелкаю по одному из них, было бы неплохо обновить только 2 элемента (новых выбранных и отмененных), но не все.

Это лучший способ справиться с этим сценарием в React?

Обновление: добавить пример кода

Компонент списка:

const MyList = (props) => {
    const items = props.items;
    const selectedId = props.selectedId;
    return (
        <div>
            {items.map((item) => (
                <MyItem
                    currentId={item.id}
                    selectedId={selectedId}
                    key={item.id}
                    content={props.content}
                />
            ))}
        </div>
    );
};

Элемент компонента:

const MyItem = (props) => {
  const isSelected = props.currentId === props.selectedId;
  return (
    <div className={isSelected ? 'selected-item' : ''}>
      <h1>{props.currentId}</h1>
    </div>
  );
};

Answer 1

Вы можете реализовать логику shouldComponentUpdate для предотвращения повторного рендеринга компонентов.Как правило, это плохая идея (подробнее об этом позже), но, похоже, она применима к вашему варианту использования.В общем, лучше просто использовать PureComponent, чтобы предотвратить ненужные повторные отображения.Это реализует shouldComponentUpdate логику, которая сравнивает state и props и, если ни то, ни другое не изменилось, обновление не происходит.

Не видя ваш код, я предпочитаю, как shouldComponentUpdate может выглядеть вваш контекст:

shouldComponentUpdate(nextProps) {
  if(this.state.isSelected && this.state.id !== nextProps.selectedId) {
    return true;
  } else if (!this.state.isSelected && this.state.id === nextProps.selectedId) {
    return true;
  }
  return false;
}

Обратите внимание, что это означает, что повторное отображение не произойдет , если shouldComponentUpdate не вернет true или вы не вызовете this.forceUpdate() для этого компонента.Ваш компонент даже не будет отображаться, если вызывается this.setState(), если вы не добавите более конкретную логику, чтобы shouldComponentUpdate возвращало true при изменении состояния.Это может привести к трудностям в отладке, когда ваш пользовательский интерфейс не отображает изменения в состоянии приложения, но очевидной ошибки не возникает.Это поведение не относится к дочерним компонентам, поэтому, если у этих компонентов есть дочерние компоненты, они все равно будут перерисованы, как и ожидалось.Если вы решите внедрить shouldComponentUpdate, вы также можете добавить логику для сравнения состояния, объявив параметр nextState:

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.isSelected && this.state.id !== nextProps.selectedId) {
    return true;
  } else if (!this.state.isSelected && this.state.id === nextProps.selectedId) {
    return true;
  } else if (/*compare this.state to nextState */) { .... }
  return false;
}

Реализация собственного shouldComponentUpdate является сложной задачей и может потребовать от вас реструктуризацииваш код для достижения наилучших результатов (например, передача переменной isSelected вашим компонентам вместо того, чтобы позволить этим компонентам решать, выбраны они или нет, может позволить вам легко реализовать PureComponent).Желаем удачи!