react——this.stState()详解

开发中我们并不能直接通过修改state的值来让界面发生更新：
    因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变
化；
    React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；
    我们必须通过setState来告知React数据已经发生了变化；
   疑惑：在组件中并没有实现setState的方法，为什么可以调用呢？
   原因很简单，setState方法是从Component中继承过来的。

执行下面的代码：

结果仍然是更新之前的数据，说明setState是异步的，我们并不能在执行完setState之后立马拿到最新的state的结果；

为什么setState设计为异步呢？

setState设计为异步，可以显著的提升性能；
p 如果每次调用setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
p 最好的办法应该是获取到多个更新，之后进行批量更新；
p 如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
p state和props不能保持一致性，会在开发中产生很多的问题；

那么如何可以获取到更新后的值呢？
  方式一：setState的回调
  setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行；
  格式如下：setState(partialState, callback)

方式二：生命周期函数：

setState并不总是异步的；

1.setTimeout中：

2.原生DOM中：

---

在如下代码中，执行：

 constructor(){
        super();
        this.state={       
            name:"mike",
            age:"18"
        }
    }

    changeItem(index){
        this.setState({
            name:"aaa"
        })
    }

setState执行后，会改变age值吗？自然是不会的。因为在react源码中是将对原对象和新对象进行合并：

执行下面代码：

执行结果：第一段代码结果counter值为1；（因为前面说了setState执行时是将新对象和以前的对象合并，即使是执行了三次setState(){counter+1} 但是每一次执行setState，都是将counter=0（因为setState是异步的）和counter=1合并，每次执行结果都是counter值为1）

第二段代码counter值为3；如果要做累加操作，可考虑在setState()里面用函数。