react中dom的渲染流程

1. react中的虛擬dom，本質上是一種對象形式到dom的描述，虛擬dom的操作是在js層面的計算，如果把js映射生成真實的dom
2. 調用生命周期中的render方法，生成虛擬dom，然后再調用reactDom.render方法，實現虛擬dom的真實dom轉換
3. 組件的再次更新，會再次調用render方法生成新的虛擬dom，然后借助diff定位出兩次虛擬dom的差異，從而針對變化的真實dom做出定向更新
4. react的diff算法，本質通過分層算法，節點前后位置的替換，會導致替換的節點全部被刪除，然后重新生成新的節點掛載在上面。key的作用是確定唯一的ID，來讓diff比較時確定是否需要重新生成
5. react的setState為異步操作，在內部通過添加一個鎖機制，來實現值的批量更新，在setTimeout(fu, 0)中，fn中的setState為同步更新
6. 在使用ts時，js對應ts結尾文件，jsx對應tsx結尾文件
7. 什么是jsx
   1. jsx是JavaScript的一種語法擴展，和模板語法很接近，當時充分具備JavaScript的能力
8. jsx是怎么在JavaScript中生效的
   1. jsx是通過babel轉換為JavaScript的
   2. babel會吧jsx代碼轉化為react.createElement調用
   3. jsx本質是React.createElement這個JavaScript調用的語法糖
   4. jsx語法糖允許前端開發者使用我們最熟悉的HTML標簽語法來創建虛擬dom
9. 頁面tree = dom tree + css tree
10. 頁面的回流與重繪
11. 代碼編譯流程 => 詞法解析 => 語法解析 => 生成AST語法樹