React浅析(六)：setState

每个React开发者，每天都会用到setState，调用setState来触发组件的渲染。

然鹅~你真的认识setState吗？？

image.png

看一个简单的问题：

addTitle(){
    const currentList = this.state.list
    console.log(this.state.list)
    this.setState={list:currentList}
    console.log(this.state.list)
}
//前后两次console的输出是一样的

为什么state需要异步？

每次setState都会触发render，可能会执行多次setstate，即使每次重复渲染，用户都看不到过程，只需要关注最后的执行结果。

这样做法的好处是，没必要每次setstate都重新渲染，考虑性能问题，可以将多次状态的改变进行合并，看到最终的结果

setState的执行过程

1、每次组件的实例，都有一个renderComponent方法，执行path(container,vnode)，vnode存值为preVnode，用于下次做新旧node树对比
2、执行renderComponent会重新执行实例的render
3、render函数返回newVnode，然后拿到preVnode
4、执行path(preVnode,newVnode)