react事件系統之事件綁定

NodeNote，持續更新中react相關庫源碼淺析， react ts3 項目

概述，背景

<div id="app"></div>
<div onclick="alert(1)">原生</div>

class APP extends React.Component{
    render(){
        return (
            <div>
                <Header/>
            </div>
        )
    }
}

class Header extends React.Component{
    clickHandler(){
        console.log("click")
    }
    render(){
        return (
            <div>
                <div onClick={this.clickHandler.bind(this)} a={1}>
                    this is Header
                </div>
                <p onClick={this.clickHandler.bind(this)} a={1}>
                    this is Header
                </p>
            </div>
        )
    }
}
ReactDOM.render(
    <APP/>,
    document.getElementById('app')
);
複製代碼

上述的組件中點擊事件的綁定過程以下：

綁定階段主要是在document上註冊一些事件，以下：

能夠看到，在渲染出來的DOM節點上並無click事件，用到事件代理，當點擊事件觸發的時候，document監聽到點擊事件觸發了，就會調用handler對應的函數dispatchInteractiveEvent開始分發點擊事件，進而調用對應節點上的點擊事件處理函數。

事件綁定後jsx與原生DOM的區別

爲了作對比，寫了一個原生的div以及對應的onclick事件處理函數，查看渲染出來的html能夠知道：react的jsx寫的onClick並無在渲染出來的DOM上添加onclick事件處理函數，這與原生DOM不同。

進一步查看react節點與原生DOM上的handler以下：

能夠看到：react會將jsx上全部節點的onClick事件綁定到document上，而後爲渲染出來的DOM添加一個空函數noop做爲點擊事件的處理函數。在document監聽到點擊事件的時候，會去fiber樹上搜集以前jsx上添加的真正的處理函數，並存入數組，依次執行。

其餘節點