react渲染

Posted 2020-09-20 -小白白白

1.生成虚拟dom

createElement的作用就是生成虚拟dom。虚拟dom到底是个啥，其实它就是个javascript对象~，这个对象的属性有props，vType，type， 而props也是个对象，它有children属性也有其他的，比如className，onClick之类的。

2.虚拟dom转化成dom

虚拟dom的vtype是3的时候对应的type是自定义组件，vtype是2的时候是对应的type是div之类的浏览器原生组件。

涉及到一个递归函数initVnode，initVnode接收一个参数：虚拟dom，返回一个参数dom。

a.如果是vtype等于3那么对应的type就是自定义的组件的构造函数，这时候，需要new一个自定义组件的对象，然后调用这个对象的render方法，

这个组件的render方法返回的仍然是个虚拟dom。 这时候就轮到递归上场了，调用自己去把这个虚拟dom转化成dom节点，并返回这个节点。

b.如果是vtype等于2，那么对应的type是浏览器原生组件，这个时候就document.createElement(type)，这里children有可能是个虚拟dom数组，

遍历这个数组，用initVnode把虚拟dom转化成dom节点，再把dom节点appendChild到他们的父组件上，并返回父组件。

 

当调用render方法时，render会去调用一个map方法，根据传入参数的不同，把被render的对象分为以下三类： 
* 文本 
* 原生 
* 自定义标签

文本

对于文本，React会实例化一个文本节点的对象，并且调用该对象的mount方法。在这个mount方法中，把文本放到一个span中，调用容器组件的innerhtml，进行渲染。

原生标签

对于原生标签，React会实例化一个处理原生标签的对象，并且调用该对象的mount方法。在这个mount方法中，拼接一个字符串，并且不断递归上面的map方法，最后把拼接好的字符串放到容器组件的innerHTML中，进行渲染。

自定义标签

这个应该是大家最好奇的。自定义标签虽然叫标签，其实就是一个类。实例化一个处理自定义标签的对象后，首先React会处理自定义标签的生命周期方法，然后再次递归调用子组件的render方法进而调用map方法，直至把自定义标签分解为前两种标签。

更新

在调用this.setState()以后，也是调用了一个map方法，根据传入参数不同，依然把要更新的标签分为文本、原生标签、自定义标签三类。具体处理过程如下。

文本

文本节点处理很简单，判断要更新后的文本与当前文本是否===，不是全等就删除原来文本，插入新文本。

自定义标签

对于自定义标签，首先根据对象的引用、key是否相同，判断是否需要更新。如果需要更新，就继续调用上述map方法进行子组件的更新。又是一个递归。但是注意，这里的map方法和渲染部分的map方法不是一个方法哟。

原生标签

对于原生标签，首先更新组件的属性，然后update子树，用diff算法来比较新的子树与目前标签的子树的不同，形成一个差异树，然后用patch方法，把这个差异树更新到真正的DOM树上。

 

Diff算法

不同类型结点：删除节点再创建

相同类型结点：直接改结点属性

列表结点：给结点加唯一标示key，减少dom操作