React事件绑定几种方法测试

前提

es6写法的类方法默认没有绑定this,不手动绑定this值为undefined。

因此讨论以下几种绑定方式。

一、构造函数constructor中用bind绑定

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      t: 't'
    }
    // this.bind1 = this.bind1.bind(this) 无参写法
    this.bind1 = this.bind1.bind(this, this.state.t)
  }

    // 无参写法 
    // bind1 () {
    //   console.log('bind1', this)
    // }

  bind1 (t, event) {
    console.log('bind1', this, t, event)
  }

  render () {
    return (
      <div>
        <button onClick={this.bind1}>打印1</button>

      </div>
    )
  }
}

二、在调用的时候使用bind绑定this

 bind2 (t, event) {
    console.log('bind2', this, t, event)
  }

  render () {
    return (
      <div>
        <button onClick={this.bind2.bind(this, this.state.t)}>打印2</button>
      </div>
    )
  }
// 无参写法同第一种

三、在调用的时候使用箭头函数绑定this

  bind3 (t, event) {
    console.log('bind3', this, t, event)
  }

  render () {
    return (
      <div>
        // <button onClick={() => this.bind3()}>打印3</button> 无参写法
        <button onClick={(event) => this.bind3(this.state.t, event)}>打印3</button>
      </div>
    )
  }

四、使用属性初始化器语法绑定this

  bind4 = () =>{
    console.log('bind4', this)
  }

  render () {
    return (
      <div>
        <button onClick={this.bind4}>打印4</button>
        // 带参需要使用第三种方法包一层箭头函数
      </div>
    )
  }

附加::方法(不能带参,stage 0草案中提供了一个便捷的方案——双冒号语法)

  bind5(){
    console.log('bind5', this)
  }

 render() {
   return (
    <div>
       <button onClick={::this.bind5}></button>
    </div>
  )
 }

方法一优缺点

优点: 只会生成一个方法实例; 并且绑定一次之后如果多次用到这个方法也不需要再绑定。

缺点: 即使不用到state,也需要添加类构造函数来绑定this,代码量多; 添加参数要在构造函数中bind时指定,不在render中。

方法二、三优缺点

优点: 写法比较简单,当组件中没有state的时候就不需要添加类构造函数来绑定this。

缺点: 每一次调用的时候都会生成一个新的方法实例,因此对性能有影响; 当这个函数作为属性值传入低阶组件的时候,这些组件可能会进行额外的重新渲染,因为每一次都是新的方法实例作为的新的属性传递。

方法四优缺点

优点: 创建方法就绑定this,不需要在类构造函数中绑定,调用的时候不需要再作绑定; 结合了方法一、二、三的优点。

缺点: 带参就会和方法三相同,这样代码量就会比方法三多了。

总结

方法一是官方推荐的绑定方式,也是性能最好的方式。

方法二和方法三会有性能影响,并且当方法作为属性传递给子组件的时候会引起重新渲染问题。

方法四和附加方法不做评论。

大家根据是否需要传参和具体情况选择适合自己的方法就好。

谢谢阅读。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java工程师日常干货

【随笔】JVM核心:JVM运行和类加载

本篇博客将写一点关于JVM的东西,涉及JVM运行时数据区、类加载的过程、类加载器、ClassLoader、双亲委派机制、自定义类加载器等,这些都是博主自己的一点...

613
来自专栏小古哥的博客园

读书笔记-JavaScript面向对象编程(三)

第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM   7.3...

3426
来自专栏安恒信息

s2-029 Apache Struts2 标签远程代码执行分析

>>>> 标签介绍 Struts2标签库提供了主题、模板支持,极大地简化了视图页面的编写,而且,struts2的主题、模板都提供了很好的扩展性。实现了更好的代码...

2586
来自专栏闵开慧

UDF编程操作实现

UDF编程操作实现 1 编写Lower_Or_UpperCase.java,其代码如下: import org.apache.hadoop.hive.ql.ex...

2744
来自专栏desperate633

Java中对于unsigned byte类型的转换处理问题由来Java中unsigned byte 的转换测试程序小结

阅读到上述源代码时,对于int luminance = row[x] & 0xFF;最初不是很理解。查询之后,发现原来Java中是没有unsigned byte...

852
来自专栏Golang语言社区

Golang 通用连接池

资源链接 https://github.com/silenceper/pool pool GoDoc Golang 实现的连接池 功能: 连接池中连接...

2968
来自专栏代码小睿

绝对定位的层判断是否有相互覆盖的解决算法

  这个算法我在上篇博文《jQuery 模拟 ubuntu 3D desktop 的 Dodge Effect 效果》中有提到过。   但那时想法过于简单,当时...

2436
来自专栏java达人

jsp中的JSTL与EL表达式用法及区别(二)

JSTL 核心标签库标签共有13个,功能上分为4类: 1.表达式控制标签:out、set、remove、catch 2.流程控制标签:if、choose、whe...

3098
来自专栏java达人

jQuery(function(){})与(function(){})(jQuery)的区别

一、先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); ...

16410
来自专栏web前端教室

大白话-prototype属性

今天来聊聊javascript的prototype, ==========先说结论========= --它是什么呢? 它是一个属性。 --谁的属性? 函数的...

1879

扫码关注云+社区