不可变值
可能是异步更新
可能会被合并

/*
 * 不可直接修改state
 */
// this.state.count++ // 错误！！❌
this.setState({
  count: this.state.count + 1
})
/*
 * 操作不可修改原数据，一定要返回一个新的 
 */
const list5Copy = this.state.list5.slice();
list5Copy.splice(2, 0, 'q');
this.setState({
  list1: this.state.list1.concat(100), // 追加
  list2: [...this.state.list2, 100], // 追加
  list3: this.state.list3.slice(0, 3), // 截取
  list4: this.state.list4.filter(item => item > 20), // 筛选
  list5: list5Copy
})
// 不可变值 -- 对象
this.setState({
  obj1: Object.assign({}, this.state.obj1, {a: 100}),
  obj2: {...this.state.obj2, a: 100}
})

可能是异步更新

this.setState({
  count: this.state.count + 1
}, () => {
  // Vue.$nextTick()
  console.log('countSync', this.state.count); // 回调拿到最新的值
})
console.log('count', this.state.count); // 异步的，拿不到最新值

// setTimeout 中 setState 是同步的
setTimeout(() => {
  this.setState({
    count: this.state.count + 1
  })
  console.log('count in setTimeout', this.state.count);
}, 0)

// 自己定义的 DOM 事件，setState 是同步的
componentDidMount() {
  document.body.addEventListener('click', () => {
    this.setState({
      count: this.state.count + 1
    })
    console.log('count in body event', this.state.count);
  })
}

可能会被合并

// 传入对象，会被合并。执行结果只有一次 +1
// 类似于 Object.assign({count: 1}, {count: 1}, {count: 1})
this.setState({
  count: this.state.count + 1
})
this.setState({
  count: this.state.count + 1
})
this.setState({
  count: this.state.count + 1
})
// 结果是+1 不是+3

// 传入函数，不会被合并
this.setState((preState, props) => preState.count + 1);
this.setState((preState, props) => preState.count + 1);
this.setState((preState, props) => preState.count + 1);
// 结果是 +3