在第一次學習react的時候，我們總會帶著許多疑問玄柠。比如我們看到下面的代碼就會想：為什么我們只是引入了React,但是并沒有明顯的看到我們在其他地方用，這時我們就會想著既然沒有用到，那如果刪除之后會不會受到影響呢？答案當然是不行的堪藐。
import React from 'react';
import ReactDOM from 'react-dom';
let element = (
<h1 id="title" className="bg" style={{color: 'red'}}>
hello
<span>world</span>
</h1>
)
console.log({type: element.type, props:element.props})
ReactDOM.render(element,document.getElementById('root'));
當我們帶著這個問題去研究的時候會發(fā)現其實在渲染element的時候調了React.createElement()，所以上面的問題就在這里找到了答案挑围。
那么React.createElement()到底干了些什么事情呢庶橱？
- 我們看一看下面的代碼
<h1 id="title" className="bg" style={{color: 'red'}}>
hello
<span>world</span>
</h1>
//上面的這段代碼很簡單，但是我們都知道react是所謂的虛擬dom,當然不可能就是我們看到的這樣贪惹。當我們將上面的代碼經過babel轉譯后，我們再看看
React.createElement("h1", {
id: "title",
className: "bg",
style: {
color: 'red'
}
}, "hello", React.createElement("span", null, "world"));
- 那到底React.createElement干了些什么呢寂嘉？
//方法接受三個參數奏瞬，第一個參數是組件類型枫绅，第二個參數是要傳遞給組件的屬性，第三個參數是children硼端。方法最終會返回一個具有以下屬性的對象
function createElement(type,config,children){
let propName;
const props = {};
for(propName in config){
props[propName] = config[propName]
}
const childrenLength = arguments.length - 2; //減掉type config 看看后面還有幾個兒子
if(childrenLength === 1){
props.children = children;
}else if(childrenLength > 1){ //如果說兒子的數量大于1的話并淋，props.children就是一個數組
props.children = Array.from(arguments).slice(2)
}
return {type,props}
}
export default {
createElement
}
/**
React.createElement("h1", {
id: "title",
className: "bg",
style: {
color: 'red'
}
}, "hello", React.createElement("span", null, "world"));
*/
最后我們看到React通過createElement方法將組件或者元素轉成ReactElement，并最終通過一系列操作渲染到頁面成為HTMLElement珍昨。
