React react原始碼梳理筆記（二）

其中，事件機制在invokeguardedcallbackdev上。先學下別人對於react事件的理解。

import

from
'../react/vdom'
function
render
(element,container)
export
default

import

from
"./createelement"
function
setprop
(dom,key,value)
else
if(key ===
'style')}
else
}function
setprops
(dom,props)}}
function
createnativedomchildren
(parentnode,children));
}else}}
function
createnativedom
(element)
=element
let dom = document.
createelement
(type)
createnativedomchildren
(dom,element.props.children)
setprops
(dom,props)
return dom 
}export
function
createdom
(element)
=element
let dom =
nullif(
!$$typeof
)else
if($$typeof
===react_element_type
)return dom 
}

新建個event.js在裡面處理：

if

(/^on/
.test
(key)))
eventstore[eventtype]
=value //給dom打標記存下事件執行函式
document.
addeventlistener
(eventtype.
slice(2
),dispatchevent,
false
)//document監聽相同事件
}let syntheticevent //只有乙個快取物件 
function
getsyntheticevent
(nativeevent)
} syntheticevent.nativeevent=nativeevent
for(let key in nativeevent)
else
}return syntheticevent
}function
dispatchevent
(event)
=event 
let eventtype =
'on'
+type
syntheticevent =
getsyntheticevent
(event)
while
(target)
=target//dom上有打下的標記
let listener = eventstore&&eventstore[eventtype]
if(listener)
target=target.parentnode//向上查詢父節點有沒有這個事件
}for
(let key in syntheticevent)
}

export

function
addevent
(dom,eventtype,value)
) eventstore[eventtype]
=value //給dom打標記存下事件執行函式
document.
addeventlistener
(eventtype.
slice(2
),dispatchevent,
false
)//document監聽相同事件
}function
persist()
}let syntheticevent //只有乙個快取物件 
function
getsyntheticevent
(nativeevent)
} syntheticevent.nativeevent=nativeevent
for(let key in nativeevent)
else
}return syntheticevent
}function
dispatchevent
(event)
=event 
let eventtype =
'on'
+type
syntheticevent =
getsyntheticevent
(event)
while
(target)
=target//dom上有打下的標記
let listener = eventstore&&eventstore[eventtype]
if(listener)
target=target.parentnode
}for(
let key in syntheticevent)
}

spark原始碼梳理 0 說明

本系列文章為對spark主要邏輯原始碼學習整理。主要參考 spark技術內幕 一書 簡稱 內幕 內幕 主要以原始碼模組為主線進行橫向解析。本文則致力於由 事件 觸發的縱向邏輯為主線，例如action運算元 transform運算元 集群啟動等，這個角度基本spark執行時的呼叫棧。各主線直接沒有必然...

Hive cli原始碼閱讀和梳理

對cli的重新認識 hive cli有兩種模式,本地模式 採用持有的driver物件來處理,遠端模式 通過連線hiveserver來實現,由此可見之前的架構圖中的描述還是模糊且帶有誤導性 支援singal的處理支援,比如對ctrl c中斷,需要兩次才完全退出互動 互動式命令處理模式 原始碼閱讀 si...

Vuex原始碼講解系列（一）功能梳理

好友的乙個關於vuex原始碼的文章，他不好意思發。我幫他發，哈哈哈 這句話我想每個搜尋過vuex官網文件的人都看到過，在學習原始碼前，當然要有一些前提條件了。了解vuex的作用，以及他的使用場景。會使用vuex，對基本api熟練掌握。有一顆求知的內心 balabla的 vuex我們通常稱之為狀態管理...