开心飞艇官网好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[HTML5] 好程序员分享React-010-事件处理函数的this指向问题

[复制链接]
1154 0
叶子老师 发表于 2019-8-9 15:34:44 | 只看该作者 |阅读模式 打印 上一主题 下一主题
好程序员分享React-010-事件处理函数的this指向问题区分普通函数与事件处理函数
1普通函数是直接调用的。不存在 this 指向问题,谁调用的,this 指向就是谁。
2普通函数没有事件对象 event
3事件处理函数其实也是一个函数,只是他绑定在某个事件上。
4事件处理函数的 this 默认指向 undefined
解决this指向问题的4种办法
1直接在事件绑定的地方加上 .bind(this)
<button onClick={this.handleClick.bind(this)}>点我</button>
2使用箭头函数
<button
  onClick={event => {
    this.handleClick(event);
  }}
>
  点我
</button>
3在构造函数中统一进行this指向的绑定
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>点我</button>
    )
  }
4使用实验性质的 public class fileds 语法。要去使用的话,的需要babel插件的支持.
1安装 @babel/plugin-proposal-class-properties babel 插件
2 babel 的配置文件中,配置好
3从新启动项目
class App extends React.Component {
  handleClick = () => {
    console.log(this);
  };
}
为啥要使用 bind 来修改this指向,而不能使用 apply、call?
因为 apply 与 call 他们会直接执行函数,而 bind 会返回一个新的函数。
在调用子组件的时候,需要传递一个方法下去,这时这个方法的this绑定推荐使用哪几种:
推荐使用:在构造函数中的bind 与 public class fileds 语法。
1首先要知道的是,父组件render,子组件一定会render
2我们希望如果子组件没有发生变化,那么在 父组件render的时候,让子组件不做render。节省性能。
3要实现第2点,可以让子组件继承的是 PureComponent
4PureComponent 。它会帮助我们计算子组件接收到的porps 有没有发生变化,如果有那么就 render .如果没有就阻止render
<Child onFn1={this.handleFn1.bind(this)}  />
// 由于 .bind() 方法每次都会返回一个新的函数,所以这种方式不推荐。。。。
<Child onFn1={() => { this.handleFn1() }}  />
// 由于 每次执行到这行代码,箭头返回都是一个新的箭头函数,所以这种方式不推荐
constructor() {
  super();
  
  this.handleFn1 = this.handleFn1.bind(this)
}
<Child onFn1={this.handleFn1}  />
  
// 由于 constructor 构造函数只会执行一次,后续执行到 Child 的代码,传递过去的 onFn1 没有发生变化
// 所以这种方式推荐
<Child onFn1={this.handleFn1}  />
handleFn1 = () => {
  ...
}
  
// 这种方式同样也推荐。
好程序员官网http://cdxfjz.com/

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

开心飞艇官网北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

开心飞艇官网杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

开心飞艇官网Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

开心飞艇官网京ICP备12003911号-5 京公安网11010802011455号

开心飞艇官网请您保持通讯畅通1对1咨询马上开启