react----------react初次渲染

參考：https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651229767&idx=1&sn=8f06283e43cfcda722189b56644f4dfc&chksm=bd4957c38a3eded58cd388130c4f303ff4033213ffcf157698d50f1ebfe87788a7f74d8be76a&scene=21#wechat_redirect

        和

        https://mp.weixin.qq.com/s/3jmJgZFktP2NMT8XLvdIKQ

React組件的渲染流程是什麼？

• 使用 React.createElement或 JSX編寫 React組件，實際上全部的 JSX代碼最後都會轉換成 React.createElement(...)， Babel幫助咱們完成了這個轉換的過程。

   

•  createElement函數對 key和 ref等特殊的 props進行處理，並獲取 defaultProps對默認 props進行賦值，而且對傳入的孩子節點進行處理，最終構形成一個 ReactElement對象（所謂的虛擬 DOM）。

   

•  ReactDOM.render將生成好的虛擬 DOM渲染到指定容器上，其中採用了批處理、事務等機制而且對特定瀏覽器進行了性能優化，最終轉換爲真實 DOM。

   

爲何代碼中必定要引入React？

JSX只是爲 React.createElement(component,props,...children)方法提供的語法糖。

全部的 JSX代碼最後都會轉換成 React.createElement(...)， Babel幫助咱們完成了這個轉換的過程。

因此使用了 JSX的代碼都必須引入 React。

爲何React組件首字母必須大寫？

babel在編譯時會判斷 JSX中組件的首字母，當首字母爲小寫時，其被認定爲原生 DOM標籤， createElement的第一個變量被編譯爲字符串；當首字母爲大寫時，其被認定爲自定義組件， createElement的第一個變量被編譯爲對象；

React在渲染真實Dom時作了哪些性能優化？

在 IE（8-11）和 Edge瀏覽器中，一個一個插入無子孫的節點，效率要遠高於插入一整個序列化完整的節點樹。

React經過 lazyTree，在 IE（8-11）和 Edge中進行單個節點依次渲染節點，而在其餘瀏覽器中則首先將整個大的 DOM結構構建好，而後再總體插入容器。

而且，在單獨渲染節點時， React還考慮了 fragment等特殊節點，這些節點則不會一個一個插入渲染。