react 深入异步setState

(1)多个setState一起调用会被合并成一个批处理,相同属性只会保留最后一次的结果

(2)若setState有回调函数,则会在setState的所有异步操作执行完成后才执行回调

(3)将异步setState同步化
	方式一:
		通过回调函数的形式
		this.setState({xx},()=>{
			获取state进行操作
			this.setState({xx},()=>{
				获取state进行操作
			})
		})
	
	方式二:
		使用函数式setState
		this.setState((preState,props)=>{
			return {
				x:preState.xx操作
			}
		})
		
		this.setState((preState,props)=>{
			return {
				x:preState.xx操作
			}
		})
		此时拿到的state值是在上一次基础上的,即同步化

代码示例:

import React,{useState,useEffect,useCallback} from 'react';
import './App.css';

class App extends React.Component{


  constructor(props)
  {
    super(props);
    this.state={
      count:0,
      name:'jeff',
      address:'bj'
    } 
  }
  componentDidMount()
  {
  	//回调
    // this.setState({
    //   count:this.state.count+1
    // },()=>{
    //   this.setState({
    //     count:this.state.count+1
    //   },()=>{
    //     this.setState({
    //       count:this.state.count+1
    //     })
    //   })
    // })
	
	//函数式
    // this.setState((prevState,props)=>{
    //   return {count:prevState.count+1}
    // })
    // this.setState((prevState,props)=>{
    //   return {count:prevState.count+1}
    // })
    // this.setState((prevState,props)=>{
    //   return {count:prevState.count+1}
    // })
    // this.setState((prevState,props)=>({count:this.prevState.count+1}))
	
	//多个异步setState会被合并成一个,且保留最后一次,所有异步操作执行完后才会执行回调
    this.setState({},()=>{
      console.log(this.state.name);
    })

     this.setState({
       count:this.state.count+1,
       address:'tj',
       name:'hh'
     })
     
     this.setState({
      count:this.state.count+10,
      name:'ah'
    })
  }


    render()
    {
        return(

            <div>
              {this.state.count}      
              {this.state.name}    
              {this.state.address}             
            </div>
        )
    }
}

export default App