之前剖析過vue中的ast的實現和dom diff的實現。這裡來到react,說說react的事件機制
這裡通過原始碼抽離react事件處理核心，手寫react事件處理方法(不和原始碼完全一樣，當基本思路及實現流程相同) 上**：
/*
* 定義addevent方法為dom物件新增事件
* 引數1： 需要繫結事件的dom節點
* 引數2： 事件型別
* 引數3： 事件的監聽函式
*/function
addevent
(dom, eventtype, listener)
) eventstore[eventtype]
= listener;
// 進行事件的繫結, slice(2)的目的是去掉事件名稱前的 "on"
document.
addeventlistener
(eventtype.
slice(2
), dispatchevent,
false)}
// 合成事件物件, 將該物件放到全域性，減少重複建立，提公升效能
// 但是在將該合成物件傳遞給當前的事件監聽函式後會被清除，這也就是為什麼react中的事件物件不能持久化儲存的原因
let syntheticevent =
null;/*
* dispatchevent方法進行事件物件的劫持，所有的事件觸發都會進入到dispatchevent()方法
* dispatchevent()中呼叫合成事件物件傳遞給使用者監聽函式，所以使用者最終獲取到的是乙個合成事件物件
* event 原生的事件物件
*/function
dispatchevent
(event)
= event;
// 取出事件的型別和事件觸發的節點
let eventtype =
"on"
+ type;
// 還原回原來的事件名: click => onclick， 用於之後從eventstore中取出監聽函式執行
// 在這裡給syntheticevent物件賦值，呼叫getsyntheticevent方法獲取當前的合成事件物件(後面定義)
syntheticevent =
getsyntheticevent
(event)
;// 獲取合成事件物件
// 模擬事件冒泡
while
(target)
= target;
// 在這裡取出之前放到eventstore中的事件監聽函式一次執行
let listener = eventstore && eventstore[eventtype]
if(listener)
target = target.parentnode;
}// 等冒泡完畢，所有的監聽函式執行完畢，則清除掉syntheticevent中的屬性，供下次syntheticevent物件重用
for(
let key in syntheticevent)}}
/*** 獲取合成事件的方法，傳遞的引數為原生的dom事件物件
*/function
getsyntheticevent
(nativeevent)
; syntheticevent.__proto__.persist = persist;
}// 將原生的事件物件和dom例項都掛載上去
syntheticevent.nativeevent = nativeevent;
syntheticevent.currenttarget = nativeevent.target;
// 將原生事件物件上的屬性和方法全部拷貝到了合成事件物件上
for(
let key in nativeevent)
else
}return syntheticevent;
}/**
* persist()函式完成合成事件物件的持久化操作(這個api在react中也是存在的)
* 持久化原理:
* 在使用者呼叫持久化函式後，將全域性的syntheticevent合成事件物件重新賦值，讓其指向乙個新的物件
* 這是在後面清除屬性的時候就清除的是新建立賦值的物件，之前傳遞給監聽函式的事件物件就不會被清除，達到持久化的效果
* 但是頻繁的使用事件物件的持久化操作，過多的物件無法被銷毀，可能會造成記憶體洩露的問題
*/function
persist()
; syntheticevent.__proto__.persist = persist;
}
原始碼剖析 Hashtable 原始碼剖析
hashtable同樣是基於雜湊表實現的，同樣每個元素都是key value對，其內部也是通過單鏈表解決衝突問題，容量不足 超過了閾值 時，同樣會自動增長。hashtable也是jdk1.0引入的類，是執行緒安全的，能用於多執行緒環境中。hashtable同樣實現了serializable介面，它支...
react原始碼解析14 手寫hooks
1.開篇介紹和面試題 2.react的設計理念 3.react原始碼架構 4.原始碼目錄結構和除錯 5.jsx 核心api 6.legacy和concurrent模式入口函式 7.fiber架構 8.render階段 9.diff演算法 10.commit階段 11.生命週期 12.狀態更新流程 1...
手寫Vuex原始碼
vuex是基於vue的響應式原理基礎，所以無法拿出來單獨使用，必須在vue的基礎之上使用。main.js 1 import store form store 引入乙個store檔案2 3new vue store.js 1 import vuex from vuex 2 3vue.use vuex ...