react基础（3）—— setState

1. setState 方法立即执行， 但是state 更新 以及dom 渲染是异步
2. setState 干了什么？react 数据更新原理？
根据传的对象(新数据)，创建新的虚拟dom节点(本质是js 对象)，
根据新的虚拟dom 对比老的虚拟dom 对象，找出差异的地方， 以最小
的代价更新到真实的dom 节点上。
3. setState 第一个参数是对象，还支持其他参数？

setState({

},function(){
//状态和dom 节点都更新完之后才执行
})

this.$nextTick(function(){
//前面的数据，更新到dom 节点中会执行 -- vue中的操作
})
4. 连续调用多次setState会对性能产生影响？

不会的,连续调用的setState 进行合并处理，最终还是走一遍

虚拟dom 创建 以及 对比流程

 

5，setState是同步还是异步？

是不能保证同步的，有的时候onClick是同步的

为什么是异步的？

如果是同步的话，碰到开发者高频调用setState方法，比如在一个回调函数中调用多个函数，每个函数调用一次setState，React会频繁渲染，性能和体验都很差，所采用了异步更新的方式，将数次变动集中起来更新。

避免这个异步更新问题两种办法：

①this.setState({xxxx},function(){查看改变后的值})

②this.setState(prevState=>...prevState,[propYouWantToChange]:valueYouWantToChange)

#################demo######################

import React,{Component} from "react";

class App extends Component{
    
    constructor(props){
        super(props);//继承 父类属性
        //等价于vue 中的data 定义
        this.state = {
            name:"kerwin",
            age:100,
            count:1
        }    
    }

    render(){
        return <div>

            {this.state.name}--{this.state.age}
            <button onClick={this.handleClick.bind(this)}>click</button>
            <p>
                
                {this.state.count}
                <button onClick={this.handleAdd.bind(this)}>add</button>
            </p>
        </div>
    }

    handleClick(){
        // this.state.name="xiaoming" //不要直接修改状态，否则引发不可预期的错误
        
        this.setState({
            name:"xiaoming",
            age:18
        },()=>{
            console.log("setstate第二个参数",this.state.name);
        })//并不保证是同步
        console.log(this.state.name)

    }

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

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

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

export default App

 

    handleAdd2(){
        this.setState((prevState)=>{
            return {
                count:prevState.count+1
            }
        })
        this.setState((prevState)=>{
            return {
                count:prevState.count+1
            }
        })
        this.setState((prevState)=>{
            return {
                count:prevState.count+1
            }
        })
    }


这个方法每次点击就可以出发三次，就不会合并了