react渲染机制

Posted 2020-11-03 ls-lansy

react组件

class Form extends React.Compoent{

　　constructor() {

　　　　super()

　　}

　　render(){

　　　　return(

　　　　<from><input type="text"/></from>

　　)

　　}

}

ReactDOM.render((<div><Form/></div>)).document.getElementById(‘app‘)

ReactDOM.render把组件进行开始渲染

React.createEelement()把组件生成一个对象，这个对象把代表一个真是的dom，这个对象就是我们说的虚拟dom，（虚拟dom就是用js对象结构模拟html的dom结构，增删改查先直接操作js对象，最后更新到真正的dom树上）

虚拟出来的dom如下：

{
  type: ‘div‘,
  props: {
    className: ‘test‘,
    children: []
  }
}

虚拟dom 对象还包括react自身需要的属性，比如ref,key

有了虚拟dom，接下来的工作就是把虚拟dom树渲染成真正的dom树

1:react的做法就是根据不同的type构造出相应的渲染对象

2:然后渲染对象使用mountcomponent方法（负责把虚拟dom生成真实的dom）

3:然后循环迭代整个虚拟dom树，生成最终的真实的dom树，最终插入容器节点

// vdom 是第3步生成出来的虚拟 dom 对象

 

var renderedComponent = instantiateReactComponent( vdom ); // dom node

 

var markup = renderedComponent.mountComponent();

 

// 把生成的 dom node 插入到容器 node 里面，真正在页面上显示出来

 

// 下面是伪代码，React 的 dom 操作封装在 DOMLazyTree 里面

 

containerNode.appendChild( markup );

。