React事件绑定的方式详解

 更新时间:2021年07月24日 08:21:51   作者:喆星高照  
react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向,今天通过本文给大家介绍React事件绑定的方式,感兴趣的朋友

一、是什么

react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick

最简单的事件绑定如下:

class ShowAlert extends React.Component {
  showAlert() {
    console.log("Hi");
  }

  render() {
    return <button onClick={this.showAlert}>show</button>;
  }
}

从上面可以看到,事件绑定的方法需要使用{}包住

上述的代码看似没有问题,但是当将处理函数输出代码换成console.log(this)的时候,点击按钮,则会发现控制台输出undefined

二、如何绑定

为了解决上面正确输出this的问题,常见的绑定方式有如下:

  • render方法中使用bind
  • render方法中使用箭头函数
  • constructor中bind
  • 定义阶段使用箭头函数绑定

render方法中使用bind

如果使用一个类组件,在其中给某个组件/元素一个onClick属性,它现在并会自定绑定其this到当前组件,解决这个问题的方法是在事件函数后使用.bind(this)this绑定到当前组件中

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>test</div>
    )
  }
}

这种方式在组件每次render渲染的时候,都会重新进行bind的操作,影响性能

render方法中使用箭头函数

通过ES6的上下文来将this的指向绑定给当前组件,同样在每一次render的时候都会生成新的方法,影响性能

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={e => this.handleClick(e)}>test</div>
    )
  }
}

constructor中bind

constructor中预先bind当前组件,可以避免在render操作中重复绑定

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

定义阶段使用箭头函数绑定

跟上述方式三一样,能够避免在render操作中重复绑定,实现也非常的简单,如下:

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

三、区别

上述四种方法的方式,区别主要如下:

  • 编写方面:方式一、方式二写法简单,方式三的编写过于冗杂
  • 性能方面:方式一和方式二在每次组件render的时候都会生成新的方法实例,性能问题欠缺。若该函数作为属性值传给子组件的时候,都会导致额外的渲染。而方式三、方式四只会生成一个方法实例

综合上述,方式四是最优的事件绑定方式

到此这篇关于React事件绑定的方式的文章就介绍到这了,更多相关React事件绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用React实现一个简单的待办事项列表的示例代码

    使用React实现一个简单的待办事项列表的示例代码

    这篇文章我们将详细讲解如何建立一个这样简单的列表,文章通过代码示例介绍的非常详细,对我们的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-08-08
  • React父组件调用子组件中的方法实例详解

    React父组件调用子组件中的方法实例详解

    最近做一个React项目,所有组件都使用了函数式组件,遇到一个父组件调用子组件方法的问题,下面这篇文章主要给大家介绍了关于React父组件调用子组件中方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • React 项目迁移 Webpack Babel7的实现

    React 项目迁移 Webpack Babel7的实现

    这篇文章主要介绍了React 项目迁移 Webpack Babel7的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React UI组件库ant-design的介绍与使用

    React UI组件库ant-design的介绍与使用

    Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用,这篇文章主要介绍了React UI组件库ant-design的介绍与使用,需要的朋友可以参考下
    2023-12-12
  • React Hooks常用钩子及基本原理解读

    React Hooks常用钩子及基本原理解读

    这篇文章主要介绍了React Hooks常用钩子及基本原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React styled components样式组件化使用流程

    React styled components样式组件化使用流程

    styled-components 是react的一个第三方库,一种css私有化的方式。用来实现CSS in JS 的方式之一。在多人协作中,css必定会出现命名冲突,与vue的scoped解决方案不同,react用styled-components的给类名加了随机字符的方式实现了css的私有化
    2023-02-02
  • React组件refs的使用详解

    React组件refs的使用详解

    这篇文章主要介绍了React组件refs的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 浅谈React的React.FC与React.Component的使用

    浅谈React的React.FC与React.Component的使用

    本文主要介绍了React的React.FC与React.Component的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • React-Route6实现keep-alive效果

    React-Route6实现keep-alive效果

    本文主要介绍了React-Route6实现keep-alive效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧<BR>
    2022-06-06
  • React Native验证码倒计时工具类分享

    React Native验证码倒计时工具类分享

    这篇文章主要为大家分享了React Native验证码倒计时工具类,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论