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 条评论
登录 后参与评论

相关文章

来自专栏逍遥剑客的游戏开发

PL/0语言编译程序分析

2195
来自专栏xingoo, 一个梦想做发明家的程序员

结构体的优化声明

声明一个结构体的时候,因为考虑到内存的对齐。例如,int型的变量,需要4个字节,那么它在存储的时候就需要在地址能够被4个字节整除的地方开始申请。 例如我们申请下...

17510
来自专栏Coding迪斯尼

eactjs开发自制编程语言Monkey的编译器:高能技术干货之语法高亮2

1335
来自专栏程序员的SOD蜜

C#中?与??的区别

起初我也不知道C#中有??操作符,今天张鹏在查看我的MVC示例程序的时候问了这个问题,检查代码后发现,下面的代码是VS2010在生成MVC应用程序自己添加的: ...

2297
来自专栏抠抠空间

Django 2.0 新款URL配置详解

Django2.0发布后,很多人都拥抱变化,加入了2的行列。 但是和1.11相比,2.0在url的使用方面发生了很大的变化,下面介绍一下:

2295
来自专栏程序员互动联盟

【编程基础】C++ Primer快速入门三:两种控制语句

语句总是顺序执行的:第一条语句执行完了接着是第二条,第三条等等。这是最简单的情况,为了更好的控制语句的运行,程序设计语言提供了多种控制结构支持更为复杂的语句执行...

3369
来自专栏从零开始学自动化测试

python笔记14-读取yaml配置文件

yaml简介 1.yaml [ˈjæməl]: Yet Another Markup Language :另一种标记语言。yaml 是专门用来写配置文件的语言,...

4688
来自专栏python百例

118-ip地址与10进制数的转换

当我们ping数字2130706433时,从127.0.0.1返回结果。为什么是这样呢? IP地址是个32位的二进制数,表示成点分10进制,只是为了方便,如果...

1313
来自专栏大数据架构师专家

python列表

>>> courses = ['Linux', 'Python', 'Vim', 'C++']

1201
来自专栏黑白安全

PHP中echo,print,print_r,var_dump有什么区别

1.echo输出字符串或者数字,接受参数列表,不是函数,没有返回值。如果只是输出,echo更快

813

扫码关注云+社区