React学习 -- 事件系统
来源:互联网 发布:怎么删除网络连接 编辑:程序博客网 时间:2024/06/05 02:27
React中virtualDOM是以对象的形式存在的,所以想要在这些对象上绑定事件,就会非常简单。React基于VirtualDOM实现了一个合成事件层,我们所定义的事件处理器会接收到一个合成事件对象的实例。
合成事件的绑定方式
<button onClick={this.handleClick}>Test</button>
这种写法和原生的HTML事件监听器属性非常相似。但是,仔细观察,就会发现还是有所区别的,下面这个是原生的HTML事件绑定方式:
<button onclick="handleClick()">Test</button>
区别有二:
1、onClick & onclick
2、HTML的属性值只能是JS代码字符串,但是在JSX中,props可以是任何类型,比如一个函数的指针:this.handleClick
而且,React并不会像DOM0那样,将事件处理器直接绑定到HTML元素之上。仅仅是借鉴了写法。
合成事件的实现机制
在React底层,主要对合成事件做了两件事:事件委派和自动绑定。
事件委派
React不会将事件处理函数直接绑定到真实的节点上,而是把所有的事件绑定到结构的最外层,使用一个统一的事件监听器。这个监听器维持了一个映射,保存所有组件内部的事件监听和处理函数。当事件发生时,首先被这个统一的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。
自动绑定
在React组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件。但是,如果开发者使用了ES6 classes或者纯函数,这种绑定就需要手动实现了。
在类定义的组件中绑定this的方法:
方法1:
import React, { Component } from 'react';class App extends Component { handleClick(e, arg) { console.log(e, arg); } render() { return <button onClick={this.handleClick.bind(this, 'test')}>Test</button>; } }
方法2:
import React, { Component } from 'react';class App extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(e) { console.log(e); } render() { return <button onClick={this.handleClick}>Test</button>; } }
方法3:
import React, { Component } from 'react';class App extends Component { const handleClick = (e) => { console.log(e); }; render() { return <button onClick={this.handleClick}>Test</button>; } }
在React中使用原生事件
React提供了很好用的合成事件系统,但是这并不意味着不能在React架构下不能使用原生的事件。我们可以在方法componentDidMount中完成原生事件的绑定。
componentDidMount() { this.refs.button.addEventListener('click', e => { this.handleClick(e); }); }
合成事件与原生事件混用
请开发者尽量避免在React中混用合成事件和原生DOM事件。
阻止React事件冒泡的行为只能用于React合成事件系统中,且没办法阻止原生事件的冒泡。反之,在原生事件中阻止冒泡行为,却可以阻止React合成事件的传播。实际上,React合成事件系统只是DOM事件系统的一个子集。
对比React合成事件与JS原生事件
1、事件传播与阻止事件传播
原生DOM事件分为三个阶段:捕获、处理、冒泡。React仅仅支持冒泡机制。在React合成事件中,使用e.preventDefault()即可阻止事件冒泡,不必考虑兼容性。
2、事件类型
React合成事件是JS原生事件的一个子集
3、事件绑定方式
在react中:
<button onClick={this.handleClick}>Test</button>
在原生DOM中:
<button onclick="alert(1);">Test</button>
或者:
el.onclick = e => { console.log(e); }
或者:
el.addEventListener('click', () => {}, false);el.attachEvent('onclick', () => {});
4、事件对象
在React合成事件系统中,开发者不必担心兼容性问题,在事件对象处理函数中一定可以得到一个合成事件对象。
- React学习 -- 事件系统
- react 事件系统
- React -- 事件系统
- React事件系统入门
- React学习之高级事件系统(二十七)
- 如何系统学习react
- React源码分析7 — React合成事件系统
- React学习笔记(5)--事件
- React Native 学习 Android 点击事件
- React事件
- react事件
- React学习之事件绑定处理机制(五)
- Qt学习笔记:事件系统
- React-事件处理详解
- React-事件处理详解
- React Native中的事件
- react中的事件
- React事件代理
- Data invert to BCD
- iOS 开发中的争议(二)UI到底应该用xib/storyboard完成,还是用手写代码来完成?
- Linux 命令笔记
- jsp
- 一元多项式求和的实现
- React学习 -- 事件系统
- 【effective Java读书笔记】注解(一)
- 三种 I/O 复用(select poll epoll)的优缺点总结 & epoll 为何如此高效
- [LeetCode]537. Complex Number Multiplication
- Mybatis概述
- Dalvik字节码的类型方法与字段表示方法
- progressBar和ProgressDialog使用
- leetcode题解-128. Longest Consecutive Sequence
- Codeforces 711E ZS and The Birthday Paradox 数论(Legendre's定理)