码迷,mamicode.com
首页 > 其他好文 > 详细

React事件绑定总结

时间:2018-09-03 02:44:33      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:window   合成   构造器   tput   解决   fine   bank   形式   数据   

需要绑定的原因
...................................................................................................
  事件绑定目的,就是事件的作用域的转移。
  问题是,react生成出来的组件,this还不能指向自身吗?
<button onClick={this.plus}>plus</button>
  plus函数上的this,是事件响应时的上下文(window),并不是当前组件实例!
  先来看看bind方法的定义:“bind()方法创建一个新的函数, 当这个新函数被调用时其this置为提供的值”,什么意思呢,看代码:
var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

var unboundGetX = module.getX;
console.log(unboundGetX()); // 调用的对象是window,所以里面的this.x => window.x
// expected output: undefined

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // 但是bind之后,会将this的值置为module提供的值
// expected output: 42

  所以代码修改为 this.plus.bind(this)之后,不过执行时的上下文是什么,函数的内部的this,始终指向组件提供的值。

 
选择绑定方法的目的
...................................................................................................
  绑定的方法有好多种,为什么需要挑选呢?我们首先要了解到:
  • DOM 是一个独立于语言的文档接口 API。在浏览器中,该 API 是用 JavaScript 实现的。但浏览器通常把DOM 和 JavaScript 分开实现。所以每次 JavaScript 访问 DOM 都会伴随着巨大的开销。
  • bind() 会创建一个绑定了作用域的函数实例。于是,从原型中实现一个实例,相当于拷贝了一份同样的函数,这是一种巨大的浪费。React想要把系统的方法关联到DOM上,我们需要最优的方法进行绑定。
  而React事件系统对DOM进行了改进,有一套高效的事件的
  • 注册
  • 存储
  • 分发
  • 重用
的机制,得到了优秀的效果:
  • 事件委托:react组件声明的事件都会转换成DOM原生事件
  • 事件冒泡:以队列的形式,可以回溯父组件
  • 合成事件:并不是单纯的使用DOM原生事件
  • 对象池:合理管理事件对象,内存分配,垃圾回收
 
实现
...................................................................................................
  • bind方法
    • 每次重新渲染时,都会生成一个新的函数实例保存在listenerBank中
      • 数量多时极其浪费内存。
      • 如果是子组件的props,则会导致子组件重新渲染
    • 用默认参数event来解决,如【箭头函数-函数上】,它们会在有event参数的情况下绑定到同一个函数上
<button onClick={this.handleEdit.bind(this, param)}>编辑</button>
  • 箭头函数上调用
    • 实际效果同bind方法,同样会造成重新绑定问题
    • 可以带参数,但是需要把参数写两次,不划算
<button onClick={(param) => this.handleEdit(param)}>编辑</button>
  • 构造器内部声明
    • 官方推荐,虽然代码量多
    • 事件只会生成一个
constructor(props){
    super(props);
    this.handleEdit = this.handleEdit.bind(this);
}
  • 箭头函数声明
    • 写法简单
    • 只会生成一个
    • 不能带参数,带参数就要写成bind方式
const handleEdit = (e) => {
    console.log(e)
}
  • 双冒号语法
    • ::的意思是,绑定左值和右值
    • 相当于.bind(this),但是不能带参数,不推荐
<button onClick={::this.click}></button
 
当组件的事件数量极多时,用【构造器内部声明】方法,否则就牺牲性能来换取便捷,有参数就用【bind方法】,没有就用【箭头函数声明】。这是又一个性能与业务平衡的例子。
 
思考
...................................................................................................
  • 为什么在VUE中的事件不需要绑定?
<button v-on:click="say(‘what‘)">Say what</button
  来看看官方原文
技术分享图片
  印证了那句话:VUE是保时捷,react是组装车。
 
  • jQuery需要事件绑定吗?
  需要。但是为了不破坏DOM的结构,并不是直接绑定在DOM上,而是通过一种缓存的方式监听数据。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React事件绑定总结

标签:window   合成   构造器   tput   解决   fine   bank   形式   数据   

原文地址:https://www.cnblogs.com/mazhaokeng/p/9573146.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!