簡(jiǎn)單聊聊React18事件系統(tǒng)

前言

在進(jìn)入正題之前，我們先思考一個(gè)問題，那就是事件系統(tǒng)重要嗎？

事實(shí)上，前端應(yīng)用因?yàn)殡x用戶最近，所以會(huì)有很多交互邏輯，就會(huì)有很多事件與之綁定。正是有這些事件，才讓頁(yè)面‘活’起來(lái)，才能讓用戶通過瀏覽器完成想要做的事情。所以事件系統(tǒng)對(duì)于用戶是非常重要的。

一、React事件系統(tǒng)介紹

對(duì)于不同的瀏覽器，對(duì)事件存在不同的兼容性，React 想實(shí)現(xiàn)一個(gè)兼容全瀏覽器的框架， 為了實(shí)現(xiàn)這個(gè)目標(biāo)，就需要?jiǎng)?chuàng)建一個(gè)兼容全瀏覽器的事件系統(tǒng)，以此抹平不同瀏覽器的差異。

所以 React 也開發(fā)了一套自己的事件系統(tǒng)。正常在 React 中綁定事件，如下所示：

      
        const handleClick = ()=>{console.log('冒泡階段執(zhí)行')}
      
      
        <button onClick={handleClick} >event</button>如上所示給按鈕綁定了一個(gè) onClick事件，事件處理函數(shù)是 handleClick，那么真的就給 button 元素綁定事件了嗎？實(shí)際上并沒有，為了證實(shí)這一點(diǎn)，打開瀏覽器調(diào)試工具，如下：
      
    

如上所示,給按鈕綁定了一個(gè)  onClick 事件，事件處理函數(shù)是  handleClick ，那么真的就給 button 元素綁定事件了嗎？實(shí)際上并沒有，為了證實(shí)這一點(diǎn)，打開瀏覽器調(diào)試工具，如圖1所示：

圖1

可以看到在 Event Listeners 中，button的處理事件并不是 handleClick，而是一個(gè)空函數(shù) noop，這個(gè)函數(shù)是React底層綁定的。通過上面我們能知道，在 React 應(yīng)用中，我們所看到的 React 事件都是‘假’的！主要體現(xiàn)在：

      
        function Index(){
      
      
            const refObj = React.useRef(null)
      
      
            useEffect(()=>{
      
      
                const handler = ()=>{
      
      
                    console.log('事件監(jiān)聽')
      
      
                }
      
      
                refObj.current.addEventListener('click',handler)
      
      
                return () => {
      
      
                    refObj.current.removeEventListener('click',handler)
      
      
                }
      
      
            },[])
      
      
            const handleClick = ()=>{
      
      
           console.log('冒泡階段執(zhí)行')
      
      
            }
      
      
            const handleCaptureClick = ()=>{
      
      
               console.log('捕獲階段執(zhí)行')
      
      
            }
      
      
        return <button 
      
      
        ref={refObj} 
      
      
        onClick={handleClick} 
      
      
        onClickCapture={handleCaptureClick} >點(diǎn)擊</button>
      
      
        }
      
    

      
        function Index(){
      
      
            const handleClick=(e)=> {
      
      
                /* 阻止事件冒泡，handleFatherClick 事件將不在觸發(fā) */
      
      
                e.stopPropagation() 
      
      
            }
      
      
            const handleFatherClick=()=> console.log('冒泡到父級(jí)')
      
      
            return <div onClick={ handleFatherClick } >
      
      
                <div onClick={ handleClick } >點(diǎn)擊</div>
      
      
            </div>
      
      
        }
      
    

二、事件系統(tǒng)設(shè)計(jì)

      
        /* 改變狀態(tài) */
      
      
        fn() 
      
      
        /* 執(zhí)行事件處理函數(shù) */
      
      
        /* 重置狀態(tài) */
      
    

      
        function Index(){
      
      
          const handleChange =() => {}
      
      
          return <div >
      
      
             <input onChange={ handleChange }  />
      
      
          </div>}
      
    

圖2

      
        const root = ReactDOM.createRoot(document.getElementById('app'))
      
    

      
        addEventListener(type, listener, useCapture)
      
    

      
        addEventListener('click',dispatchEvent$1,true)
      
      
        addEventListener('click',dispatchEvent$2,false)
      
    

這樣 onClick 事件就可以在冒泡階段執(zhí)行，onClickCapture 事件也可以在捕獲階段執(zhí)行了。

三、新老版本事件系統(tǒng)差異

      
        const registrationNameModules = {
      
      
            onBlur: SimpleEventPlugin,
      
      
            onClick: SimpleEventPlugin,
      
      
        ...
      
      
        }
      
    

圖3

四、圖書推薦

大咖推薦

-End-

撰  稿  人：計(jì)旭

責(zé)任編輯：張淑謙

審  核  人：時(shí)靜