Использование структуры данных Set в состоянии React

Возможно ли использовать структуру данных ES6 Set в React?

Например, если у меня есть контрольный список, состоящий из отдельных элементов, и я бы хотел сохранить состояние проверенного элемента. Я бы хотел написать что-то вроде этого:

export default class Checklist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Set()
    }
  }

  addItem(item) {
    //...?
  }

  removeItem(item) {
    //...?
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

Я понимаю, что может возникнуть проблема с тем, что набор изменен по своей природе, а React выполняет мелкое сравнение при обновлении компонента, поэтому он ожидает, что неизменяемые объекты будут переданы и сохранены в состоянии. Однако существует ли способ удерживать и поддерживать объект Set в состоянии?

Ответ 1

Так как реагирование будет определять изменения состояния только в том случае, если свойство состояния было заменено, а не изменено (неглубокое сравнение), вам придется создать новый набор из старого и применить к нему изменения.

Это возможно, поскольку новый Set (oldSet)! == oldSet.

const oldSet = new Set([1, 2]);
const newSet = new Set(oldSet);

console.log(oldSet === newSet);

Ответ 2

state - это всего лишь общий объект, вы можете удерживать все, что захотите. Вы можете перезаписать shouldComponentUpdate жизненного цикла shouldComponentUpdate чтобы реализовать его самостоятельно. Вы можете использовать свою собственную логику, чтобы выяснить, требуется ли обновлять компонент или нет. Вам даже не нужно встраивать свой набор, вы можете просто установить его прямо как state:

this.state = new Set();