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