深入理解React事件处理的机制及原理

  • 时间:
  • 9551人关注

这篇文章主要介绍了React事件处理的机制及原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,另外这篇文章主要知识点是关于React、React事件机制、javascript的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:javascript
  • 编辑整理:蓬晓霞
  • 教程字数:2919字节
  • 阅读时间:大概5分钟
  • 下载本教程(DOC版)
  • React Developer Tools
  • React Native全教程:移动端跨平台应用开发
  • React精髓
  • JavaScript+Vue+React全程实例
  • React精髓
  • React中的事件处理

    在React元素中绑定事件有两点需要注意:

    (1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式。例如onclick要写成onClick,onchange要写成onChange等。
    (2)处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式。例如在DOM中绑定一个点击事件应该写成:

    <button onclick="clickButton()">
      Click
    </button>
    

    而在React元素中绑定一个点击事件变成这种形式:

    <button onClick={clickButton}> // clickButton是一个函数
      Click
    </button>
    

    React中的事件是合成事件,并不是原生的DOM事件。

    React根据W3C规范定义了一套兼容各个浏览器的事件对象。在DOM中可以通过返回false来阻止事件的默认行为,但在React中,必须显式的调用事件对象的preventDefault方法来阻止事件的默认行为。

    在某些场景下如果必须使用DOM提供的原生事件,可以通过React事件对象的nativeEvent属性获取。

    其实,在平时的开发中,React组件中处理事件最容易出错的地方是事件处理函数中的this的指向问题,因为ES6 class并不会为方法自动绑定this到当前对象。

    下面我们具体来看一下常见的三种处理this的方式:

    React事件处理的this处理

    使用箭头函数

    直接在React元素中采用箭头函数定义事件的处理函数,如:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          number: 0
        }
      }
    
      render() {
        return (
          <button onClick={(event) => {
              console.log(this.state.number);
            }}>
            Click
          </button>
          )
      }
    }

    箭头函数中的this指向的是函数定义时的对象,所以可以保证this总是指向当前组件的实例对象。

    当事件处理逻辑比较复杂时,如果把所有的逻辑直接写在onClick的大括号中,就会导致render函数变的臃肿,不容易直观地看出组件的UI结构,代码可读性也不好。这样,我们可以把逻辑处理封装成组件的一个方法,然后在箭头函数中调用该方法即可。

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          number: 0
        }
      }
    
      handleClick(event) {
        const number = ++this.state.number;
        this.setState({
          number: number
        });
    
      }
    
      render() {
        return (
          <button onClick={(event) => {
              this.handleClick(event);
            }}>
            Click
          </button>
          )
      }
    }

    直接在render方法中为元素事件定义事件处理函数,最大的问题是,每次render调用时,都会重新创建一个新的事件处理函数,带来额外的性能开销,组件所处层级越低,这种开销就越大。当然,大多数情况下,这种开销是可以接受的。

    使用组件方法

    直接将组件的方法赋值给元素的事件属性,同时在类的构造函数中,将这个方法的this绑定到当前对象。如:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          number: 0
        };
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick(event) {
        const number = ++this.state.number;
        this.setState({
          number: number
        });
    
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            Click
          </button>
          )
      }
    }
    
    

    这种方法的好处是每次render不会重新创建一个回调函数,没有额外的性能损失。但在构造函数中,为事件处理函数绑定this,尤其是存在多个事件处理函数需要绑定时,这种模板式的代码还是会显得繁琐。

    有时候我们还会为元素的事件属性赋值时,同时为事件处理函数绑定this,例如:

    class MyComponent extends React.Component {
      
      ……
    
      render() {
        return (
          /* 事件属性赋值和this绑定同时 */
          <button onClick={this.handleClick.bind(this)}>
            Click
          </button>
          )
      }
    }
    
    

    使用bind会创建一个新的函数,因此这种写法依然存在每次render都会创建一个新函数的问题。但是在需要为函数传入额外的参数时,这种写法就比较方便了。

    class MyComponent extends React.Component {
      
      ……
    
      render() {
        const type = 1;
        return (
          /* 事件属性赋值和this绑定同时 */
          <button onClick={this.handleClick.bind(this, type)}>
            Click
          </button>
          )
      }
    }
    
    

    属性初始化语法

    使用ES7的property initializers会自动为class中定义的方法绑定this。例如:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          number: 0
        };
      }
    
      handleClick = (event) => {
        const number = ++this.state.number;
        this.setState({
          number: number
        });
    
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            Click
          </button>
          )
      }
    }

    这种方式既不需要在构造函数中手动绑定this,也不需要担心组件重复渲染导致的函数重复创建的问题。不过由于property initializers 这个特性还处于试验阶段,默认有些浏览器是不支持的,需要使用babel来进行支持。

    通过上面我们可以看到,只要处理好了React组件中函数的this绑定问题,React的事件处理就没有太大的问题了。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


    上一篇:小程序列表中item左滑删除功能的实现代码

    下一篇:JavaScript 如何合并两个Json对象

    相关内容

    • 实例详解如何在React中写一个Animation组件为组件进入和离开加上动画/过度效果

      这篇文章主要介绍了在React中写一个Animation组件为组件进入和离开加上动画/过度效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

      02-18在React中写一个Animation组件为组件进入和离开加上动画/过度效果

      阅读更多
    • ES6语法重构React组件代码知识点

      这篇文章主要介绍了利用ES6语法重构React组件的相关资料,文中通过示例代码介绍的很详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。

      01-02利用ES6语法重构React组件详解

      阅读更多
    • react native实现往服务器上传网络图片详解

      下面小编就为大家带来一篇react native实现往服务器上传网络图片的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      05-08react native实现往服务器上传网络图片的实例

      阅读更多
    • webpack 2的react开发配置详解

      本篇文章主要介绍了webpack 2的react开发配置实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      07-29webpack 2的react开发配置实例代码

      阅读更多
    • 详细介绍React-Native 组件之 Modal的使用

      本篇文章主要介绍了React-Native 组件之 Modal的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      02-12React-Native 组件之 Modal的使用详解

      阅读更多
    • PHP、MySQL与JavaScript学习手册(第4版)

      PHP、MySQL与JavaScript学习手册(第4版)

      本书有借助面向对象的编程基础,深入学习PHP。研究MySQL,从数据库结构到复杂查询。掌握JavaScript语言,以及带有jQuery的增强功能。调用Ajax进行后台浏览器/服务器通信等,欢迎免费下载

      大小:76 MBPHP

      点击下载
    • JavaScript前端开发案例教程

      JavaScript前端开发案例教程

      JavaScript是这种运用于Web前端开发的开发语言,具备简易、易懂、实用的特性,用JavaScript开发设计网页页面能够提高网页页面的参与性,为客户出示即时的、动态性的互动感受。 《 JavaScript前端

      大小:75.1 MBJS前端

      点击下载
    • 你不知道的JavaScript 下卷

      你不知道的JavaScript 下卷

      本书讲解JavaScript开发人员不求甚解的大趋势,深入理解语言内部的机制,全面介绍JavaScript中常被人误解和忽视的重要知识点,分为上中下三套,欢迎下载

      大小:7 MBJavaScript

      点击下载
    • JavaScript权威指南(第6版)

      JavaScript权威指南(第6版)

      大小:22 MBJS指南

      点击下载
    • JavaScript编程全解

      JavaScript编程全解

      JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题,无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

      大小:6.67 MBjs编程

      点击下载
    • JavaScript语言精粹

      JavaScript语言精粹

      JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好

      大小:9.9 MBJavaScript

      点击下载
    • Three.js开发指南:WebGL的JavaScript 3D库

      Three.js开发指南:WebGL的JavaScript 3D库

      大小:180.1 MBThree.js

      点击下载
    • JavaScript启示录

      JavaScript启示录

      《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

      大小:24.4 MBJS

      点击下载

    学习笔记