Несколько тегов dom генерируются заново, когда `setState`

Question

class Calendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: null,
    }
  }

  generate = () => {
    console.log('generate');
    let tags = [];
    for(let i = 0; i<31; i++){
      tags.push(<div key={i} className={this.state.selected === (i+1) ? 'selected' : ''}>{i+1}</div>);
    }
    return tags;
  }

  clickHandle = (e) => {
    this.setState({
      selected: e.target.innerText
    })
  }

  render(){
    return(
      <div onClick={this.clickHandle}>
        {this.generate()}
      </div>
    )
  }
}

Когда я нажимаю div, он вызывает generate().

Я думаю, что это неэффективно.

Есть ли более эффективный способ создания нескольких элементов из приведенного выше кода?

Условие

1. Когда я нажимаю один div, он должен получить класс selected.

2. Когда я нажимаю другой div, предыдущий нажатий div должен удалить класс selected и 1.

Answer 1

Я нахожу здесь две проблемы, препятствующие достижению желаемого результата. Когда вы используете значения из DOM, вы всегда получаете строку. Поскольку вы используете '===', оно никогда не оценивается как true и, следовательно, className не изменяется.

clickHandle = (e) => {
    this.setState({
      selected: parseInt(e.target.innerText, 10)
    })
  }

Вы также должны использовать ключ при использовании повторяющихся элементов, чтобы улучшить производительность.

generate = () => {
    console.log('generate');
    let tags = [];
    for(let i = 0; i<31; i++){
      tags.push(<div key={'keyname'+i} className={this.state.selected === (i+1) ? 'selected' : ''}>{i+1}</div>);
    }
    return tags;
  }

Answer 2

Вы должны дать каждому div уникальный ключ .Это помогает React перерисовывать только те div, которые действительно имеют изменения, в то время как остальные, которые не изменились, просто будут повторно использованы.

let tags = [];
for(let i = 0; i<31; i++){
  tags.push(<div key={i} className={this.state.selected === (i+1) ? 'selected' : ''}>{i+1}</div>);
}
return tags;