计算机教程

当前位置:3522.com > 计算机教程 > 【3522.com】React事件绑定几种方法测试

【3522.com】React事件绑定几种方法测试

来源:http://www.4sports-uk.com 作者:3522.com 时间:2019-05-11 03:57

前提

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>
    )
  }
}

本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

二、在调用的时候使用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>
    )
  }
// 无参写法同第一种

React事件绑定

3522.com,三、在调用的时候使用箭头函数绑定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,因此在调用的时候如果忘记绑定,this的值将会是undefined。

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

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

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

通常如果不是直接调用,应该为方法绑定this。绑定方式有以下几种:

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

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

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

1. 在构造函数中使用bind绑定this

方法一优缺点

优点:

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

缺点:

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

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

方法二、三优缺点

优点:

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

缺点:

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

2. 在调用的时候使用bind绑定this

方法四优缺点

优点:

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

缺点:

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

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
  Click me
  </button>
 );
 }
}

总结

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

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

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

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

谢谢阅读。

3. 在调用的时候使用箭头函数绑定this

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={()=>this.handleClick()}>
  Click me
  </button>
 );
 }
}

4. 使用属性初始化器语法绑定this(实验性)

本文由3522.com发布于计算机教程,转载请注明出处:【3522.com】React事件绑定几种方法测试

关键词: 3522.com

上一篇:Linux errno

下一篇:没有了