react渲染机制

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把组件进行开始渲染

 

参考

https://www.jianshu.com/p/2a6fe61d918c

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 );

。