简单聊聊React18事件系统

前言

在进入正题之前，我们先思考一个问题，那就是事件系统重要吗？

事实上，前端应用因为离用户最近，所以会有很多交互逻辑，就会有很多事件与之绑定。正是有这些事件，才让页面‘活’起来，才能让用户通过浏览器完成想要做的事情。所以事件系统对于用户是非常重要的。

一、React事件系统介绍

对于不同的浏览器，对事件存在不同的兼容性，React 想实现一个兼容全浏览器的框架， 为了实现这个目标，就需要创建一个兼容全浏览器的事件系统，以此抹平不同浏览器的差异。

所以 React 也开发了一套自己的事件系统。正常在 React 中绑定事件，如下所示：

      
        const handleClick = ()=>{console.log('冒泡阶段执行')}
      
      
        <button onClick={handleClick} >event</button>如上所示给按钮绑定了一个 onClick事件，事件处理函数是 handleClick，那么真的就给 button 元素绑定事件了吗？实际上并没有，为了证实这一点，打开浏览器调试工具，如下：
      
    

如上所示,给按钮绑定了一个  onClick 事件，事件处理函数是  handleClick ，那么真的就给 button 元素绑定事件了吗？实际上并没有，为了证实这一点，打开浏览器调试工具，如图1所示：

图1

可以看到在 Event Listeners 中，button的处理事件并不是 handleClick，而是一个空函数 noop，这个函数是React底层绑定的。通过上面我们能知道，在 React 应用中，我们所看到的 React 事件都是‘假’的！主要体现在：

      
        function Index(){
      
      
            const refObj = React.useRef(null)
      
      
            useEffect(()=>{
      
      
                const handler = ()=>{
      
      
                    console.log('事件监听')
      
      
                }
      
      
                refObj.current.addEventListener('click',handler)
      
      
                return () => {
      
      
                    refObj.current.removeEventListener('click',handler)
      
      
                }
      
      
            },[])
      
      
            const handleClick = ()=>{
      
      
           console.log('冒泡阶段执行')
      
      
            }
      
      
            const handleCaptureClick = ()=>{
      
      
               console.log('捕获阶段执行')
      
      
            }
      
      
        return <button 
      
      
        ref={refObj} 
      
      
        onClick={handleClick} 
      
      
        onClickCapture={handleCaptureClick} >点击</button>
      
      
        }
      
    

      
        function Index(){
      
      
            const handleClick=(e)=> {
      
      
                /* 阻止事件冒泡，handleFatherClick 事件将不在触发 */
      
      
                e.stopPropagation() 
      
      
            }
      
      
            const handleFatherClick=()=> console.log('冒泡到父级')
      
      
            return <div onClick={ handleFatherClick } >
      
      
                <div onClick={ handleClick } >点击</div>
      
      
            </div>
      
      
        }
      
    

二、事件系统设计

      
        /* 改变状态 */
      
      
        fn() 
      
      
        /* 执行事件处理函数 */
      
      
        /* 重置状态 */
      
    

      
        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 事件就可以在冒泡阶段执行，onClickCapture 事件也可以在捕获阶段执行了。

三、新老版本事件系统差异

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

图3

四、图书推荐

大咖推荐

-End-

撰  稿  人：计旭

责任编辑：张淑谦

审  核  人：时静