深入浅出setState

众所周知，react.js是将数据储存在state中，通过this.state来访问state，通过this.setState()方法来更新state中的数据，调用this.setState()方法时，react会重新调用render方法来渲染页面UI数据。

关于setState的调用问题

1. 函数调用

this.setState((state, props) => {
  return {counter: state.counter + props.step};
},callback); 

**说明: **传入两个参数， 一位state本身， 二为props参数(没用时可不传)，需要return出返回的值

2. 对象调用

this.setState({quantity: 2},callback) // callback在状态更新且界面更新之后回调

说明：传入一个对象，对象问state本身， 里面为state中要更新的值

3. 如何选择(总结)

对象方式是函数方式的简写方式

如果新状态不依赖于原状态 ===> 使用对象方式 ------------上代码就完事了！！！！！！

test2 = () => {
 this.setState({
     count: 3 // 给一个指定的只  不基于count原有的值进行改变
     //count: this.state.count + 1  可解决下面问题 我本人不喜欢用函数方式更新数据，其用发主要区分于下面setState异步多次执行的去区别上
 })
}

如果新状态依赖于原状态 ===> 使用函数方式 -----------上代码！！！！！！

test1 = () => {
 this.setState(state => ({count: state.count + 1})) // count 在自己原有值的基础上+1操作  即是依赖，  这里说明一下前两天写小程序也遇到同样的问题， 要去看看小程序的setDate有没有同样的解决方法！！！！！！！！！！！！！！！
}

如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取----------同理上代码

test3 = () => {
    this.setState(state => ({count: state.count + 1}), () => { // 在状态更新且界面更新之后回调
        console.log('test3 setState callback()', this.state.count)
    })
}

说明： 这里为什么这么写呢， 这里有一个setState更新数据的问题，下面马上讲到

setState()异步OR同步更新

1. setState更新状态时同步的还是异步的？
   1. 了解setState的执行位置

在react控制的回调函数中：生命周期函数 / react的事件监听回调

在非react控制的异步回调函数中: 定时器回调 / 原生事件监听 / Promise回调 / .....

2. 异步OR同步

react相关回调中: 异步执行

其它异步回调中: 同步执行

2. 关于异步的setState是怎么调用怎样执行的？
   1. 多次执行如何处理？

setState({}): 合并更新一次状态, 只调用一次render()更新界面 ---状态更新和界面更新都合并了

话不多说上代码啦！！！！！！！！！！！！！！！！！！！！！！！！！

class StateTest extends React.Component {
 state = {
     count: 0,
 }
componentDidMount () {
 this.setState({count: this.state.count + 1}) // 0 + 1
 console.log(this.state.count) //  ==> 0
 this.setState({count: this.state.count + 1}) // 0 + 1 发生合并
 console.log(this.state.count) //  ==> 1
}
render() {
 const count = this.state.count
 console.log('render', count)  
 return (
     <div>
         <p>{count}</p> // 1
     </div>
 )
}
}

​ setState(fn): 更新多次状态, 但只调用一次render()更新界面 ---状态更新没有合并, 但界面更新合并了

  > 话不多说上代码啦！！！！！！！！！！！！！！！！！！！！！！！！！

class StateTest extends React.Component {
state = {
   count: 0,
}
componentDidMount () {
   this.setState({count: this.state.count + 1}) // 0 + 1
   console.log(this.state.count) //  ==> 1
   this.setState({count: this.state.count + 1}) // 1 + 1 没有发生合并
   console.log(this.state.count) //  ==> 2
}
render() {
   const count = this.state.count
   console.log('render', count)  
   return (
       <div>
           <p>{count}</p> // 2
       </div>
   )
}
}

总结：

  > 1. 相同点：

  >    异步setState中， 在同一个事件函数中多次调用setState时， render函数只会执行一次。
   
  > 2. 不同点
   
  >    函数模式的调用，在同一个事件函数中多次调用setState时，合并多次数据更新，即多次更新同一个值时每次等会生效，后面的基于前面的数值进行改变。
   
  >    对象模式的调用，在同一个事件函数中多次调用setState时，合并一次数据更新，即多次更新同一个值时只有最后一个生效， 之前的会被覆盖。
   
  > 

2. 如何得到异步更新后的数据？

在setState()的callback回调函数中------------------上代码了！！！！！！！！！！！

test3 = () => {
this.setState(state => ({count: state.count + 1}), () => { // 在状态更新且界面更新之后回调
  console.log('test3 setState callback()', this.state.count)
})
}

注意：此处问题在上面调用问题中已经有说明。

关于多种setState调用的执行顺序问题

class StateTest extends React.Component {
 state = {
     count: 0,
 }

 componentDidMount() {
     this.setState({count: this.state.count + 1})
     this.setState({count: this.state.count + 1})
     console.log(this.state.count) // 2 ==> 0
     this.setState(state => ({count: state.count + 1}))
     this.setState(state => ({count: state.count + 1}))
     console.log(this.state.count) // 3 ==> 0
     setTimeout(() => {
         this.setState({count: this.state.count + 1})
         console.log('timeout', this.state.count) // 10 ==> 6
         this.setState({count: this.state.count + 1})
         console.log('timeout', this.state.count) // 12 ==> 7
     }, 0)
     Promise.resolve().then(value => {
         this.setState({count: this.state.count + 1})
         console.log('promise', this.state.count)  // 6 ==>4
         this.setState({count: this.state.count + 1})
         console.log('promise', this.state.count) // 8 ==> 5
     })
  }
 render() {
     const count = this.state.count
     console.log('render', count)  // 1 ==> 0   4 ==>3   5 ==>4  7 ==>5  9 ==>6  11 ==>7
     return (
         <div>
             <p>{count}</p>
         </div>
     )
 }
}
ReactDOM.render(<StateTest/>, document.getElementById('example'))

说明： 执行顺序 ==> 打印输出的count的值

所有的setState都在componentDidMount生命周期函数中写着， 所以首先执行render打印console.log('render', count) ==> 0 ， 进入钩子函数执行setState({}), 此处两次发生合并数据和视图合并，打印console.log(this.state.count) 2 ==> 0， 再执行setState(fn)， 此处只发生了视图合并，打印console.log(this.state.count) // 3 ==> 0， 异步操作结束，进入render函数，打印console.log('render', count) 4 ==>3，接下来开始同步setState进入Promise 执行第一个setState，之后即可进入render函数打印console.log('render', count)5 ==>4 ， 再返回Promise 执行第一个console.log('promise', this.state.count) // 6 ==>4， 执行第二个setState 同理进入render 打印console.log('render', count)7 ==>5，回到Promise 执行第二个 console.log('promise', this.state.count) // 8 ==> 5， 最后进入定时器 操作与Promise 一样。

注意： 此处代码不管怎么调整， 执行顺序都是异步操作 > Promise > 定时器