每日质量NPM包事件绑定_bindme(详解React的this) (2)

所以就衍生出了绑定this的方法;常用的有四种,我们一般会使用在constructor里面bind

//优先级最高 constructor(props){ super(props); this.handleEvent = this.handleEvent.bind(this) }

这种和直接在构建事件中绑定很像对吧?

<input onChange={this.handleEvent.bind(this)} />

原理虽然是一样的,但是性能却差了一大截.为什么?

我们知道只要state值改变了,就会导致render重新渲染,如果直接在创建事件绑定,那每一次渲染的时候都需要重新绑定一次,会大大降低性能.相反,只要在构造的时候绑定,无论渲染多少次,绑定都还是一次

此外还有比较常用的箭头函数绑定法和::绑定法
前面也介绍了箭头函数this的知识,所以在React出现也是蛮高的

handleEvent = () => { ... } <input onChange={this.handleEvent} />

::虽然也可以绑定this,但是因为不能传参数,所以不经常使用

handleEvent = () => { ... } <input onChange={::this.handleEvent} />