React-изменение состояния без использования setState: должно избегать его?

мой код работает, но у меня есть вопрос лучшей практики: у меня есть массив объектов в состоянии, и взаимодействие с пользователем изменит значение одного объекта за раз. Насколько я знаю, я не должен изменять состояние напрямую, я всегда должен использовать setState вместо. Если я хочу избежать этого любой ценой, я глубоко клонирую массив итерацией и изменю клон. Затем установите состояние клона. На мой взгляд, избегая менять состояние, которое я изменю позже в любом случае это просто снижает мою производительность.

Полная версия: этот.государство.данные-это массив объектов. Он представляет собой список тем в форуме, и любимая кнопка будет переключаться, вызывая clickCollect(). Поскольку у меня есть массив в состоянии, когда я изменяю свойство is_collected одного элемента, мне нужно создать копию массива для работы, и после изменения на новое значение я могу установить его в состояние.

var data = this.state.data.slice(0);
data[index].is_collected = !data[index].is_collected;
this.setState({data: data});

var data = this.state.data : Это скопирует указатель на массив и push(), shift () и т. д. изменит состояние напрямую. Оба!--8--> и this.state.data будут затронуты.

var data = this.state.data.slice(0): это делает мелкий клон, push и shift не изменяет состояние, но в моем клоне у меня все еще есть указатели на элементы массива состояния. Так что если я изменюсь data[0].is_collected, this.state.data[0].is_collected получает также изменен. Это происходит до того, как я звоню setState().

как правило, я do:

var data = []; 
for (var i in this.state.data) {
    data.push(this.state.data[i]); 
}

затем я изменяю значение в индексе, устанавливая его в true, когда это false или false, когда это true:

data[index].is_collected = !data[index].is_collected;

и изменения состояния:

this.setState({data: data});

считайте, что мой массив относительно большой или чрезвычайно большой, я думаю, что эта итерация уменьшит производительность моего приложения. Я бы заплатил эту цену, если бы знал, что это правильный путь по любой причине. Однако, в этой функции (clickCollect) I всегда устанавливайте новое значение в состояние, я не жду ложного ответа API, который сказал бы, чтобы остановить внесение изменений. Во всех случаях новое значение будет входить в состояние. Практически я зову setState только для UI, чтобы снова оказать. Итак, вопросы:

1. должен ли я создать глубокий клон в этом случае? (for var i in ...)
2. если нет, имеет ли смысл сделать мелкий клон (.slice(0)), если мой массив содержит объекты? Изменения вносятся на объекты внутри массива, поэтому мелкий клон все еще изменяет мое состояние, как и копия (data = this.state.data) будет делать.

мой код упрощен, а вызовы API вырезаны для простоты.

это вопрос новичка, поэтому также приветствуется совершенно другой подход. Или ссылки на другие Q & А.

import React from 'react';

var ForumList = React.createClass({
  render: function() {
      return <div className="section-inner">
        {this.state.data.map(this.eachBox)}
      </div>
  },
  eachBox: function(box, i) {
    return <div key={i} className="box-door">
        <div className={"favorite " + (box.is_collected ? "on" : "off")} onTouchStart={this.clickCollect.bind(null, i)}>
          {box.id}
        </div>
    </div>
  },
  getInitialState: function() {
    return {data: [
      {
        id: 47,
        is_collected: false
      },
      {
        id: 23,
        is_collected: false
      },
      {
        id: 5,
        is_collected: true
      }
    ]};
  },
  clickCollect: function(index) {
    var data = this.state.data.slice(0);
    data[index].is_collected = !data[index].is_collected;
    this.setState({data: data});
  }
});

module.exports = ForumList;