react 事件机制的理解-01

最新推荐文章于 2024-04-24 08:37:57 发布

zz_jesse

最新推荐文章于 2024-04-24 08:37:57 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/zz_jesse/article/details/102666157

版权

640?wx_fmt=png

背景

写本文也算是实现19年的一个 flag，研究一个知识点并且把自己的理解整理成文分享出来。

react 事件机制一共有4篇吧，也没有太长，其实可以合成一篇文章，只是想把文章进行划分一下，稍微结构化一些。

本知识点文章如下：

1. 对事件机制的初步理解和验证

2.对于合成的理解

3. react 事件的注册

4. react 事件的执行

这篇文章是第一篇，主要内容有：表象理解，验证，意义和思考

表象理解

先回顾下对react 事件机制基本理解，react 自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。

我们都知道react 的所有事件并没有绑定到具体的 dom节点上而是绑定在了document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。

上面是基于对 react 事件的一个基本的认知，那这个认知是否正确呢？我们可以通过简单的方法进行验证。

验证

验证内容：

1. 所有事件均注册到了元素的最顶层-document 上

2. 节点的事件由统一的入口处理

为了方便，直接通过 cli 创建一个项目。

代码如下：

componentDidMount(){ 

        document.getElementById('btn-reactandnative').addEventListener('click', (e) => {
            console.log('原生+react 事件:   原生事件执行');
        });

    }

    handleNativeAndReact = (e) => {
        console.log('原生+react 事件:  当前执行react事件');
    }

    handleClick=(e)=>{
        console.log('button click');
    }
 render(){
        return <div className="pageIndex"><p>react event!!!</p
                <button id="btn-confirm" onClick={this.handleClick}>react 事件</button>

                <button id="btn-reactandnative" onClick={this.handleNativeAndReact}>原生 + react 事件</button>
        </div>
    }

代码中给两个 button绑定了合成事件，单独给btn#btn-reactandnative绑定了一个原生的事件。

然后看下chrome 的控制台，查看元素上的注册事件。

640?wx_fmt=jpeg