react三种函数绑定方式

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

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);
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.概念 在JavaScript中,this 是指当前函数中正在执行的上下文环境,因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,149评论 0 2
  • 1. this之谜 在JavaScript中,this是当前执行函数的上下文。因为JavaScript有4种不同的...
    百里少龙阅读 1,023评论 0 3
  • React可以使用React.createClass、ES6 classes、纯函数3种方式构建组件。使用Reac...
    自度君阅读 1,565评论 0 1
  • Javascript this 在JavaScript中, this 是当前执行函数的上下文。 JavaScri...
    Cause_XL阅读 405评论 0 1
  • 好久没有这么痛快的看完一本书了,确切的说是一本旧书,第一次看大概在四年前,年龄在长,同样的书感受大不同。上次看的完...
    米策阅读 406评论 0 2