React中的setState使用及注意问题

一、this.setState的两种使用方式

定义初始状态

state = { count: 0 }

如果此时有一个按钮，点击按钮让计数加1，我们可以有两种写法：

1. 传递对象 this.setState({ count: this.state.count + 1 })
2. 传递函数 this.setState((state, props) => ({ count: count+1 }))

二、setState的两种方式有何不同？

如果变更的state的值需要依赖于上一次的state的值，这种情况就需要用到函数的形式，比如一下这种情况

addCount() {
  this.setState({ count: this.state.count + 1 })  // 0 + 1
  this.setState({ count: this.state.count + 1 })  // 0 + 1
  this.setState({ count: this.state.count + 1 })  // 0 + 1
  // 此处三次获取到的state都是未修改时的状态。
}

此时只会执行一次+1的操作，因为在React内部，会将多次setState合并操作，新的state由object.assgin({}，{count: 0}, {count:1})合并所得，以上赋值会执行三次，但因为count的值没有更新，所以最终执行的结果只+1，如果setState的赋值是函数，那情况就不一样了

addCount() {
  this.setState((state, props) => ( count: count + 1 ))
  this.setState((state, props) => ( count: count + 1 ))
  this.setState((state, props) => ( count: count + 1 ))

这样每次获取到的state都是上一次修改后最新的状态，就会得到+3的效果，因为React会进行判断，如果传入的是函数，那么将执行此函数，此时count的值就已经是被修改了的。

三、setState是同步还是一部的？

☆☆☆☆☆ 是异步的

(1) 即我们通过this.setState修改了状态之后，在它的下一行输出state的值并不会得到新的值。 (2) 为什么是异步？ 有两个原因，一是提高效率，每次修改state的值都会造成render的重新渲染，将多次state的值合并统一更新可以提高性能；二是render的更新会晚一些，如果render中有子组件，子组件的props依赖于父组件的state，props和state就不能保持一致。 (3) 如何获取异步时的state值？ ① 在setState的回调函数中

this.setState({
  count: this.state.count + 1
}, () => {
  console.log(this.state.count)
})

② 在componentDidUpdate中获取

componentDidUpdate() {
  console.log(this.state.count)
}

☆☆☆☆☆ 是同步的

(1) 即我们通过this.setState修改状态之后，在它的下一行输出state是新的值 (2) 什么场景下是同步的？ ① 原生js获取dom元素，并绑定事件

<button id="addBtn">点我+1</button>
componentDidMount() {
  const addBtn = document.getElementById("addBtn")
  addBtn.addEventListener('click', () => {
    this.setState({ count: this.state.count + 1 })
    console.log(this.state.message)
  })
}

② 计时器 setTimeout

<button onClick={ e => this.addOne }>点我+1</button>
addOne() {
  setTimeout(() => {
    this.setState({ count: this.state.count + 1 })
    console.log(this.state.count)
  })
}