React源码理解

渲染阶段   

React中的jsx文件，babel会将jsx转化成js。

假设在React中render一个<div>，在相应的js中会有一个React.createElement的方法，接受component、props... children的参数，还有ref、key等属性，使用js构建出一个虚拟dom。

虚拟dom：在js中构造出dom，用js对dom进行增删改，最后将修改的部分应用到真实dom中。

构造出虚拟的dom后，调用instantiateReactComponent的方法，这个方法会根据传入的vdom的类型，3种类型，1.string\value类型 2.原生的类型例如div 3.自定义类型

构建出相应的dom后，调用mountComponent方法，最终将产生的添加到相应的节点中。

createInstanceForText();
ReactCompositeComponentWrapper是一个工厂类

觉得写的比较清晰的一篇文章: https://www.jianshu.com/p/2a6fe61d918c

 

setState之后阶段

1.通过ReactInstanceMap方法获得相应渲染对象。

2.对渲染对象的_pendingStateQueue操作，将需要更新的状态push进去。

3.检查是否处于一个批量更新的状态，若处于批量更新状态，则将该渲染对象放入dirtyComponent中。若不处于，则调用ReactDefaultBatchingStrategyTransaction开启一个新的事物，进行vdom的比较。

4.internalInstance.updateComponent(partialState);

可参考链接：https://github.com/sixwinds/blog/issues/10

 

转载于:https://www.cnblogs.com/bounceFront/p/8616755.html