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

。