e.nativeEvent.stopPropagation()}>我是彈窗\n )}\n \n );\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從上面的代碼裏我們不難看出我們想要做一個點擊某一個按鈕來展示一個模態框，並且在點擊除了模態框區域以外的位置希望能夠關閉這個模態框。 但是實際運行結果和我們所想的完全不一樣，點擊了button按鈕並沒有任何反應，這就需要從"},{"type":"codeinline","content":[{"type":"text","text":"React"}]},{"type":"text","text":"的合成事件說起了，讓我們分析完"},{"type":"codeinline","content":[{"type":"text","text":"React"}]},{"type":"text","text":"的合成事件 後能夠完全的來解答這個問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"demo地址：https:\/\/codesandbox.io\/s\/event-uww15?file=\/src\/App.tsx:0-690"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"合成事件的特性"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"React"}]},{"type":"text","text":"自行實現了一套事件系統，主要特性有以下"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"自行實現了一套事件捕獲到事件冒泡的邏輯, 抹平各個瀏覽器之前的兼容性問題。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"使用對象池來管理合成事件對象的創建和銷燬，可以減少垃圾回收次數，防止內存抖動。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"事件只在document上綁定，並且每種事件只綁定一次，減少內存開銷。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先我們先拋開上面那個按鈕，用下面這個十分簡單的案例來了解"},{"type":"codeinline","content":[{"type":"text","text":"React"}]},{"type":"text","text":"的事件使用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"function App() {\n function handleButtonLog(e: React.MouseEvent
) {\n console.log(e.currentTarget);\n }\n function handleDivLog(e: React.MouseEvent) {\n console.log(e.currentTarget);\n }\n function handleH1Log(e: React.MouseEvent) {\n console.log(e.currentTarget);\n }\n return (\n \n
\n
{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"以下分析基於React, ReactDOM 16.13.1版本"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"提出問題"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們借鑑一個比較典型的案例開始來分析"},{"type":"codeinline","content":[{"type":"text","text":"React"}]},{"type":"text","text":"事件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"export default class Dialog extends React.PureComponent {\n state = {\n showBox: false\n };\n componentDidMount() {\n document.addEventListener(\"click\", this.handleClickBody, false);\n }\n handleClickBody = () => {\n this.setState({\n showBox: false\n });\n };\n handleClickButton = (e) => {\n e.nativeEvent.stopPropagation();\n this.setState({\n showBox: true\n });\n };\n render() {\n return (\n