React事件

hearaway 发布于2019-08-20 14:27 / 700人阅读

摘要：在中使用原生事件在中使用原生事件级事件和。的合成事件实现中，仅仅对最外层容器进行绑定，并且依赖事件冒泡完成事件委派，避免了事件捕获的浏览器不兼容特性。

Event Handler ----React事件

React中的事件包括合成事件和原生事件，React底层对合成事件进行事件委派和手动绑定，原生事件的使用在高程3有具体讲解，难点在于跨浏览器兼容和DOM0/DOM2级事件处理程序的使用方法不同，这可以通过编写工具函数屏蔽浏览器差异，关于原生事件的描述在《Event Handler 事件处理程序 1》和《Event Handler 事件处理程序 2》中有详细解释。

合成事件：事件委派

React不会把事件处理函数直接绑定到真实的节点上，而是把所有事件绑定到最外层，使用一个统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和函数。当组件挂载或者卸载时，只是在这个统一的事件监听器上插入或者删除一些对象；当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。这简化了事件处理和回收机制，效率也有很大提升。

合成事件：手动绑定

使用class或者纯函数创建组件时，this不会自动绑定，需要手动绑定：
1）bind方法，可以传递参数；
//在button上绑定事件处理函数，类似于DOM0级事件绑定

    return

2）在class的构造函数constructor内部完成this绑定，仅需要一次绑定；

    this.handleClick = this.handleClick.bind(this);

这是我目前常用的方法，一般在super(props)后面。

3）在组件内部创建时间通过箭头函数创建事件处理程序以实现绑定，由于箭头函数自动绑定了定义此函数作用域的this，不需要再使用bind方法。

    class App extends Component{
        const handle(e) = (e) =>{console.log(e);};
        render(){
        return ;
        }
    }

在React中使用原生事件

在React中使用原生事件DOM2级事件：addEventListener()和removeEventListener()。为什么使用原生事件？因为有些时候需要将事件绑定在组件的父级元素上。在React中一般在componentDidMount之后调用原生事件，这时DOM节点已经确定。一定要在组件卸载时（componentWillUnmount）手动解除绑定，不然内存就会泄露。合成事件系统不需要这样，React已经妥善处理了这一点（怎么处理的？）。

对比React事件和JavaScript原生事件（DOM2级事件）

JavaScript原生事件传播有事件捕获、事件冒泡两个先后的过程，分别是由外到内和由内到外，事件捕获并不是一个通用的技术，在低于IE9版本的浏览器中无法使用。而且IE浏览器的事件处理机制和其他浏览器不同，通过原生JavaScript实现的通用事件处理程序中一般使用if else语句对浏览器差异性进行屏蔽。React的合成事件实现中，仅仅对最外层容器进行绑定，并且依赖事件冒泡完成事件委派，避免了事件捕获的浏览器不兼容特性。

最好避免同时使用原生事件和合成事件，混用时由于合成事件机制将事件绑定在了最外层，对内层组件上的事件处理函数使用e.preventDefault()无法阻止事件默认操作，因为事件不知道自身绑定在内部组件上。最好的方法是不混用合成事件和原生事件，或者混用时通过在if语句中使用e.target判断事件的直接绑定元素是不是内部组件。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81651.html

5、React组件事件详解

摘要：组件事件响应在构建虚拟的同时，还构建了自己的事件系统且所有事件对象和规范保持一致。的事件系统和浏览器事件系统相比，主要增加了两个特性事件代理和事件自动绑定。 React组件事件响应 React在构建虚拟DOM的同时，还构建了自己的事件系统；且所有事件对象和W3C规范保持一致。 React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定。 1、事件代理 ...

Ververica 2019-08-22 15:13 评论0 收藏0
【React深入】React事件机制

摘要：给注册原生事件回调为统一的事件分发机制。根据元素唯一标识和事件类型从中取出回调函数返回带有合成事件参数的回调函数总流程将上面的四个流程串联起来。可见，回调函数是直接调用调用的，并没有指定调用的组件，所以不进行手动绑定的情况下直接获取到的是。关于React事件的疑问 1.为什么要手动绑定this 2.React事件和原生事件有什么区别 3.React事件和原生事件的执行顺序，可以混...

philadelphia 2019-08-23 15:39 评论0 收藏0
谈谈React事件机制和未来(react-events)

摘要：另外第三方也可以通过的事件插件机制来合成自定义事件，尽管很少人这么做。抽象跨平台事件机制。打算干预事件的分发。事件是的一个自定义事件，旨在规范化表单元素的变动事件。 showImg(https://segmentfault.com/img/remote/1460000019961124?w=713&h=307); 当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定...

TNFE 2019-08-26 10:32 评论0 收藏0
深入React知识点整理（一）

摘要：以我自己的理解，函数式编程就是以函数为中心，将大段过程拆成一个个函数，组合嵌套使用。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。也许继面向对象编程之后，函数式编程会成为下一个编程的主流范式。使用React也满一年了，从刚刚会使用到逐渐探究其底层实现，以便学习几招奇技淫巧从而在自己的代码中使用，写出高效的代码。下面整理一些知识点，算是React看书...

Gilbertat 2019-08-22 11:18 评论0 收藏0
react开发教程（七）React事件系统

摘要：按钮中使用原生事件中提供了很好的合成事件系统，但有时候也需要用到原生事件。而使用合成事件系统时则不需要，因为内部以及处理了。事件类型键盘事件焦点事件表单事件鼠标事件选择事件触摸事件事件动画事件图像事件媒体事件剪贴板事件上一篇开发教程六与事件系统 Virtual DOM在内存中是以对象的形式存在的，如果想要在这些对象上添加事件的话，React是基于Virtual DOM实现了一个合成事...

walterrwu 2019-08-21 11:50 评论0 收藏0