react的bind(this)

react中组件处理事件最容易出错是事件处理函数中的this的指向问题,因为ES6 class并不会为方法自动绑定this到当前对象.React实力函数的写法主要有三种形式,不同的写法解决this指向问题的方式也不同.

1.使用箭头函数,这种写法每次render调用时,都会重新创建一个新的组件,带来额外的性能开销.

不传参

传参

2.使用组件方法,直接将方法赋值给元素的事件属性,并在构造器中将方法bind到当前对象.这么写的好处是每次render不会重新创建一个回调函数,但是如果有很多个函数,那构造器里就写很多行,另外,传参的时候,也是使用的箭头函数,也是每次render就会床创建函数

不传参

传参

  3.属性初始化语法(property initializer syntax),不用在构造器中手动绑定this,也没有render重复渲染的新更能问题,但是怎么传参呢?

不传参

 

 

总结

以上是生活随笔为你收集整理的react的bind(this)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。