react从state中获取的数组可以直接修改吗？

Question

如下代码感觉不合理，应该怎么写var items = this.state.items;   items[i].status = 'doing';   this.setState({         items: items   });问题出现的环境背景及自己尝试过哪些方法相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

首先不推荐这种写法，更为推荐的是immutable的写法，比如：

var items = this.state.items;  

this.setState({  
  items: items.map(item => ({...item, ...{status: 'doing'}}))  
});

为什么直接修改不推荐呢？

有两个原因：

1 . 性能问题

这种直接改变原有对象的方式导致react无法对其进行任何优化，因此
会有潜在的性能问题

2 . 很难定位问题

如果你用了purecomponent， 会发现状态无法直接更新。
原因在于purecomponent重写了SCU，SCU中通过直接判断state和props前后的引用差别来判断，因此会
返回false，导致render无法运行