一、jsx如何生成element
這裡是一段寫在render裡的jsx**。
return首先，它會經過babel編譯成react.createelement的表示式。(
hello, this is react
start to learn right now!
right reserve.
)
return這個react.createelement的表示式會在render函式被呼叫的時候執行，換句話說，當render函式被呼叫的時候，會返回乙個element。二、element如何生成真實節點( react.createelement(
'div',
,react.createelement(
header,
null
, 'hello, this is react'),
react.createelement(
'div',
null
, 'start to learn right now!'),
'right reserve')
)
二、element如何生成真實節點
順利得到element之後，我們再來看看react是如何把element轉化成真實dom節點的。
首先，需要去初始化element,初始化的規則如下：
以第一條為例：先判斷是否為object型別，是的話，看它的type是否是原生dom標籤，是的話，給它建立reactdomcomponent的例項物件，其他同理。
其實這些都是react的私有類，react自己使用，不會暴露給使用者的。它們的常用方法有：mountcomponent,updatecomponent等。其中mountcomponent 用於建立元件，而updatecomponent用於使用者更新元件。
而我們自定義元件的生命週期函式以及render函式都是在這些私有類的方法裡被呼叫的。
react元件渲染原理
jsx 經過babel編譯成react.createelement的表示式。element在react裡，是組成虛擬dom 樹的節點，用來描述在瀏覽器上看到什麼。它的引數有三個 1 type 標籤 2 attributes 標籤屬性，沒有的話，可以為null 3 children 標籤的子節點 e....
react更新渲染及渲染原理
觸發元件的更新有兩種更新方式 props以及state改變帶來的更新。本次主要解析state改變帶來的更新。整個過程流程圖如下 1 一般改變state，都是從setstate開始，這個函式被呼叫之後，會將我們傳入的state放進pendingstate的陣列裡存起來，然後判斷當前流程是否處於批量更新...
react頁面渲染之前 react 渲染順序
工作中要對乙個 做再次更新,可能是渲染後更新或者部分元件渲染之後,對頁面效果做處理 之前對react的理解,僅僅停留在render渲染.這次好好理解了下react的生命週期 1 react元件有三種狀態 mounted 已插入真實的dom updating 正在被渲染 和 unmounted已移除真...