## :-: 渲染原理 **渲染：生成用于顯示的對象，以及將這些對象形成真實的DOM對象。** - React元素：React Element，通過`React.createElement()`創建(語法糖：jsx) - React節點：專門用于渲染到UI界面的對象。通過React元素，創建React節點 React節點類型： - React DOM節點：創建該元素的React元素類型是一個字符串。 - React 組件節點：創建該節點的React元素類型是函數或者類。 - React 文本節點(TextNode)：由字符串創建。 - React 空節點：null、undefinged、false、true - React 數組節點：該節點是由一個數組創建的。 真實DOM：通過`document.createElement()`創建的dom元素。 ### :-: 首次渲染(新節點渲染) - 通過參數的值創建節點 - 根據不同的節點，做不同的事情。 - 文本節點：通過`document.createTextNode()`創建真實的文本節點。 - 空節點：什么都不做 - 數組節點：遍歷數組，將數組中的每一項遞歸創建節點 - DOM節點：通過`document.createElement()`創建真實的DOM對象， 然后立刻設置該真實DOM元素的各種屬性，然后遍歷該對應React元素的children屬性，遞歸操作。 - 組件節點：1.函數組件：調用函數返回值生成節點。2.類組件：創建實例，調用對象的生命周期方法，運行render方法拿到節點對象。 - 會生成虛擬DOM樹，然后將樹形結構保存起來，以便后續使用。 - 將之前生成的真實DOM對象，插入到容器中。