聊一聊react原理那些事

首先是JSX，通过babel可以查看到一段jsx代码会被编译成createElement这个函数，那么根据不同的代码片段，可以归纳出createElement接收的三种参数类型 第一种

createElement("tag",属性/null,child1,child2）

第二种

createElement("组件“，属性/null,[child1,child2])//比如map循环

第三种

createElement("tag".属性/null,string)

那么经过编译以后createElement会返回VNode，再通过patch函数通过diff算法最优方式把JSX渲染到页面中

patch(ele,VNode)
patch(VNode,newVode)

那上述的是react组件渲染的过程，接下来聊聊组件更新的过程： 首先最重要的就是了解到setState不可变值这个概念，当需要setState(newState)时底层逻辑会先去判断当前是不是处于batchUpdata，如果处于这个状态，就把组件保存到dirtyComponents中，如果不处于这个状态就遍历所有的dirtyComponents，然后调用updatecomponents更新状态。那么为什么会有batchupdate这个概念呢？ 在react中执行一个方法或者生命周期的时候react首先会定义一个isbatchingupdates=true,然后执行一系列操作，函数执行完成后isbachingUpdates=false;而在setTimeout或者其他的自定义dom事件中，由于他是一个异步操作，先去web API里面等待执行时机，所以等到执行它们的时候，isbachingUpdates已经变成false了，因此会更新state，获取最新的状态。 最后总结一下可以命中batchUpdate的操作：react能够管理到的入口，比如生命周期，定义的函数；不能被命中的有setTimeout，setInterval,自定义dom事件，这些不能被react管理到的都是。