美文网首页
react三种函数绑定方式

react三种函数绑定方式

作者: 夏天deg | 来源:发表于2018-09-13 16:28 被阅读0次

又到了闲下来的时光,写写小日记(简称,叨逼叨时间),开心。

1.直接用bind绑定

Function.prototype.bind(thisArg [, arg1 [, arg2, …]])是ES5新增的函数扩展方法,bind()返回一个新的函数对象,该函数的this被绑定到thisArg上,并向事件处理器中传入参数

//params参数
<div onClick={this.showModal.bind(this, params)}></div>

2.箭头函数绑定

箭头函数则会捕获其所在上下文的this值,作为自己的this值,使用箭头函数就不用担心函数内的this不是指向组件内部了。可以按下面这种方式使用箭头函数:

<div onClick={(params) =>{this.showModal}}></div>

3.构造函数绑定

在构造函数constructor内绑定this,好处是仅需要绑定一次,避免每次渲染时都要重新绑定,函数在别处复用时也无需再次绑定

Class Header extends Component{
  constructor () {
    this.showModal = this.this.showModal.bind(this);
  }
}

相关文章

  • react三种函数绑定方式

    又到了闲下来的时光,写写小日记(简称,叨逼叨时间),开心。 1.直接用bind绑定 Function.protot...

  • React事件绑定this的几种方法

    React事件处理函数绑定this的集中方法 Follow me on GitHub React事件处理函数绑定t...

  • React创建组件的三种方式

    React推出后,出于不同的原因先后出现三种定义react组件的方式。 具体的三种方式: (1)函数式定义的无状态...

  • React创建组件的三种方式及其区别

    React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式: 函数式定义的无状...

  • React中的this绑定

    在编写react组件时经常需要进行函数的this绑定,使用ES6方式创建的组件中的函数必须手动绑定this,thi...

  • jsx(2)-绑定this的方法

    jsx事件绑定-this的三种绑定方式 1.bind2.使用箭头函数3.使用回调函数 第一种 默认绑定,就算直接执...

  • 学习react总结知识点

    传统HTML中 handleclick函数自动绑定了this,而react中 需要手动绑定,下面是回调函数绑定...

  • react组件成员函数绑定写法

    用ES6书写react组件成员函数绑定的三种方法如下,推荐使用第三种 第一种,使用bind来绑定 第二种,在构造函...

  • React面试题

    1React 中有三种构建组件的方式 React.createClass()、ES6 class 和无状态函数。 ...

  • React创建组件的三种方式

    React常见的三种组件创建方式,具体如下: 1.函数式定义的无状态组件 2.es5原生方式React.creat...

网友评论

      本文标题:react三种函数绑定方式

      本文链接:https://www.haomeiwen.com/subject/vzawgftx.html