React 無狀態元件生成真實DOM結點

先以下面一段簡單的**舉例：

const greeting = function () `}
;};

可以看出，greeting 是乙個無狀態元件，我們來看看編譯過後的可執行**：

var greeting = function greeting(_ref) ;

我們看到，呼叫 greeting 元件時傳入的 name 屬性，出現在 react.createelement() 方法的第二個引數中，這和前面介紹的 jsx 是一致的，不同的是，react.createelement() 方法的第乙個引數不再是乙個標籤名，而是乙個函式引用，指向了我們宣告的 greeting 元件，而 name 屬性也作為引數的成員出現在元件內部，這個引數名為 _ref，實則是我們熟知的 props。

我們再來看乙個稍微複雜些的例子：

const greeting = function () `}
);};const container = function () 
);}; 
);

在上面**中，我們定義了兩個無狀態元件，其中 container 用來作為外層的容器，greeting 則用來顯示實際的業務檢視。

現在再來看看編譯後的**結構：

var greeting = function greeting(_ref) ;
var container = function container(_ref2) ,
children
);}; container,
null,
react.createelement(greeting, ),
react.createelement(greeting, ),
react.createelement(greeting, )
);

這次我們主要觀察 container 的結構，它實際上是將 react.createelement() 方法的第三個引數作為 props.children 傳遞到了元件內部，而這個 children 是乙個 greeting，最終是將 greeting 渲染在 container 元件內部。

接下來，我們要改進一下之前實現的 react.createelement() 和 reactdom.render() 方法，使它們支援元件的形式，模擬生成虛擬 dom 和真實 dom。

先來看看 react.createelement() 方法：

const react = 
// 結點
let vnode = 
};// 掛載元件函式體的虛擬dom
if (typeof type === 'function') );
}return vnode;
}};

上面的**主要對元件做了特殊處理。如果當前處理物件是元件，則對應的 type 就是函式的引用，我們會呼叫這個元件函式，然後將函式體的結果作為 body 屬性掛載到該結點上。需要注意的是，我們在上面方法引數中使用了可變引數的形式，如果直接引用這個 children，它本身就是乙個變引數組，如果元件體內使用了 props.children，那麼在呼叫 react.createelement() 時，變引數組的形式將會是 [[...]]，所以我們需要特殊處理一下。

現在，我們執行程式，看看上面**生成的虛擬 dom 結構：

最後，再來看看 reactdom.render() 方法：

const reactdom = ,
// 獲取真實dom
generatedom(vnode) 
let elem = document.createelement(vnode.type);
// 特殊key值對映
let specialkeymap = ;
let = vnode;
// 設定dom屬性
props && object.keys(props).foreach(key => else 
});} else if (key === 'style') :$`);
});elem.setattribute('style', styleitems.join(';'));
} else 
});return elem;
}};

上面**中改動較小，我們只新增了幾行針對元件的處理邏輯，如果是元件函式，則將函式體的虛擬 dom 生成真實 dom。

最後，我們來看看最終生成的 dom 結構：

React 無狀態元件生成真實DOM結點

React 有狀態元件生成真實DOM結點

react無狀態元件

react 中的無狀態元件

React 無狀態元件生成真實DOM結點

React 有狀態元件生成真實DOM結點

react無狀態元件

react 中的無狀態元件

相關推薦