1．组件中用到的一个变量是不是应该作为组件 State，可以通过下面的三条依据进行判断：
这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。 这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。 这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。
当存在多个组件共同依赖一个状态时，一般的做法是==状态上移==，将这个状态放到这几个组件的公共父组件中。
2．State 的更新是异步的
调用setState，组件的state并不会立即改变，setState只是把要修改的状态放入一个队列中，React会优化真正的执行时机，并且React会出于性能原因，可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的State，计算下个State。当真正执行状态修改时，依赖的this.state并不能保证是最新的State，因为React会把多次State的修改合并成一次，这时，this.state将还是这几次State修改前的State。另外需要注意的事，同样不能依赖当前的Props计算下个状态，因为Props一般也是从父组件的State中获取，依然无法确定在组件状态更新时的值。
举个例子，对于一个电商类应用，在我们的购物车中，当我们点击一次购买数量按钮，购买的数量就会加1，如果我们连续点击了两次按钮，就会连续调用两次this.setState({quantity: this.state.quantity + 1})，在React合并多次修改为一次的情况下，相当于等价执行了如下代码：
Object.assign(
previousState,
{quantity: this.state.quantity + 1},
{quantity: this.state.quantity + 1}
)
于是乎，后面的操作覆盖掉了前面的操作，最终购买的数量只增加了1个。
如果你真的有这样的需求，可以使用另一个接收一个函数作为参数的setState，这个函数有两个参数，第一个是当前最新状态（本次组件状态修改后的状态）的前一个状态preState（本次组件状态修改前的状态），第二个参数是当前最新的属性props。如下所示：
// 正确
this.setState((preState, props) => {
counter: preState.quantity + 1;
})
3．State的更新方式
如有一个数组类型的状态books，当向books中增加一本书时，使用数组的concat方法或ES6的数组扩展语法（spread syntax）：
在setState中修改数组时可以定义新数组等于state中的数组然后修改，也可以用preState方法来代替新数组
// 方法一：将state先赋值给另外的变量，然后使用concat创建新数组
var books = this.state.books;
this.setState({
books: books.concat(['React Guide']);
})
// 方法二：使用preState、concat创建新数组
this.setState(preState => ({
books: preState.books.concat(['React Guide']);
}))
// 方法三：ES6 spread syntax
this.setState(preState => ({
books: [...preState.books, 'React Guide'];
}))
当从books中截取部分元素作为新状态时，使用数组的slice方法：
Slice(a,b)用来取数组中a开始到b-a之间的元素
// 方法一：将state先赋值给另外的变量，然后使用slice创建新数组
var books = this.state.books;
this.setState({
books: books.slice(1,3);
})
// 方法二：使用preState、slice创建新数组
this.setState(preState => ({
books: preState.books.slice(1,3);
}))
当从books中过滤部分元素后，作为新状态时，使用数组的filter方法：
// 方法一：将state先赋值给另外的变量，然后使用filter创建新数组
var books = this.state.books;
this.setState({
books: books.filter(item => {
return item != 'React';
});
})
// 方法二：使用preState、filter创建新数组
this.setState(preState => ({
books: preState.books.filter(item => {
return item != 'React';
});
}))
注意不要使用push、pop、shift、unshift、splice等方法修改数组类型的状态，因为这些方法都是在原数组的基础上修改，而concat、slice、filter会返回一个新的数组。
当状态的类型是普通对象时有两种方法：
1.使用ES6 的Object.assgin方法：
// 方法一：将state先赋值给另外的变量，然后使用Object.assign创建新对象
var owner = this.setState.owner;
this.setState({
owner: Object.assign({}, owner, {name: 'Jason'});
})
// 方法二：使用preState、Object.assign创建新对象
this.setState(preState => ({
owner: Object.assign({}, preState.owner, {name: 'Jason'});
}))
2.使用对象扩展语法（object spread properties）
// 方法一：将state先赋值给另外的变量，然后使用对象扩展语法创建新对象
var owner = this.setState.owner;
this.setState({
owner: {...owner, {name: 'Jason'}};
})
// 方法二：使用preState、对象扩展语法创建新对象
this.setState(preState => ({
owner: {...preState.owner, {name: 'Jason'}};
}))
总结一下，创建新的状态对象的关键是，避免使用会直接修改原对象的方法，而是使用可以返回一个新对象的方法。当然，也可以使用一些Immutable的JS库，如Immutable.js，实现类似的效果。
那么，为什么React推荐组件的状态是不可变对象呢？一方面是因为不可变对象方便管理和调试，了解更多可参考这里；另一方面是出于性能考虑，当对象组件状态都是不可变对象时，我们在组件的shouldComponentUpdate方法中，仅需要比较状态的引用就可以判断状态是否真的改变，从而避免不必要的render调用。当我们使用React提供的PureComponent时，更是要保证组件状态是不可变对象，否则在组件的shouldComponentUpdate方法中，状态比较就可能出现错误，因为PureComponent执行的是浅比较（比较对象的引用）。
