JSX代碼變成DOM的原理--流程總結(jié)描述：
開發(fā)者編寫JSX代碼? --> Babel 編譯 --> React.createElement調(diào)用 --> ReactElement調(diào)用
-->生成‘虛擬DOM’? 作為參數(shù)傳入--->ReactDOM.render() 渲染處理-->真實DOM
JSX代碼變成DOM的原理--流程步驟細(xì)節(jié)描述：
一、JSX是如何映射為DOM的：起步createElement
1、export? function createElement(type,config,children)
type:用于標(biāo)識節(jié)點的類型
config:以對象形式傳入，數(shù)組所有的屬性都會以鍵值對的形式存儲在config對象中
children:以對象形式傳入，它記錄的是組件標(biāo)簽之間嵌套的內(nèi)容
2、createElement是一個參數(shù)中介：參數(shù)數(shù)據(jù)格式化
入口?React.createElement
二次處理key、ref、self、source四個屬性值
遍歷 config ,篩選可以提進(jìn)props里的屬性
提取子元素，推入childArray（也即props.children）數(shù)組
可視化defaultProps
落腳點?結(jié)合以上數(shù)據(jù)作為入?yún)?，發(fā)起ReactElement調(diào)用
3、JSX語法糖：
React.createElement('ul',{
????className:'list'
},React.createElement('li',{
????key:'1'
},1),React.createElement('li',{
????key:'2'
},'2'));
等價Html
<ul className='list'>
????<li key='1'>1</li>
????<li key='2'>2</li>
</ul>
二、ReactElement（初識虛擬DOM）
組裝：把傳入的參數(shù)按一定的規(guī)范組裝進(jìn)element對象里然后return給了React.createElement，然后React.createElement把ReactElement對象返回給了開發(fā)者
三、ReactDom.render 渲染處理生成真實DOM渲染到頁面中
ReactDom.render(
element,//需要渲染的元素（ReactElement）
container,//元素掛載的目標(biāo)容器（一個真實DOM）
[callback]//回調(diào)函數(shù)，可選參數(shù)，可以用來處理渲染結(jié)束后的邏輯
)
例如：?
<body>
????<div id='root'></div>
</body>
const rootElement = document.getElementById('root');
ReactDOM.render(<App/>,rootElement);
虛擬DOM：核心算法的基石
組件初始化：調(diào)用render方法 --> 生成虛擬DOM --> 調(diào)用ReactDOM.render方法-->創(chuàng)建真實DOM
組件更新：調(diào)用render方法-->生成虛擬DOM --通過diff算法 -->定位出兩次虛擬DOM的差異-->對發(fā)生變化的真實DOM做定向更新
