React setState

React setState

• 对于 setState() 相信伙伴们都用过，它是 react 官方推荐用来更新组件 state 的 API，但是对于 setState() 你真的了解吗？且待我慢慢详聊一番。

语法

• setState(arg1, [arg2])
• arg1: 对象类型，会将传入的对象浅层合并到新的 state 中。
• arg2: 可选，回调函数。

 /*
* @Author: HuangBingQuan bingquan111@qq.com
* @Date: 2022-10-27 23:11:13
* @LastEditors: HuangBingQuan bingquan111@qq.com
* @LastEditTime: 2022-10-27 23:59:34
* @FilePath: /react_test/src/01-base/12-setState同步和异步.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React, { Component } from 'react'

export default class App extends Component {
 state = {
   count: 1
 }
 render () {
   return (
     <div>
       {this.state.count} <br />
       <button onClick={this.handelAdd1()}>add1</button>
       <button onClick={this.handelAdd2()}>add2</button>
     </div>
   )
 }
 handelAdd1 () { // 同步
   return () => {
     // this.setState({
     //   count: this.state.count + 1
     // })

     // console.log(this.state.count) 1

     // this.setState({
     //   count: this.state.count + 1
     // })

     // console.log(this.state.count) 1

     // this.setState({
     //   count: this.state.count + 1
     // })

     // console.log(this.state.count) 1

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


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

     this.setState({
       count: this.state.count + 1
     }, () => {
       // 状态 和真实DOM已经更新完了
       console.log(this.state.count) // 2
     })
   }
 }
 handelAdd2 () { // 异步
   return () => {
     setTimeout(() => {
       this.setState({
         count: this.state.count + 1
       })

       console.log(this.state.count) // 2

       this.setState({
         count: this.state.count + 1
       })

       console.log(this.state.count) // 3

       this.setState({
         count: this.state.count + 1
       })

       console.log(this.state.count) // 4
     }, 0)
   }
 }
}

/*
 setState 处在同步的逻辑中，异步更新状态，更新真实dom
 setState 处在异步的逻辑中，同步更新状态，同步更新真实dom

 setState 接受第二个参数，第二个参数是回调函数，状态和dom更新完后就会被触发。
*/ 

总结

• setState 处在同步的逻辑中，异步更新状态，更新真实dom

• setState 处在异步的逻辑中，同步更新状态，同步更新真实dom

• setState 接受第二个参数，第二个参数是回调函数，状态和dom更新完后就会被触发。