绑定React事件的方式插图

一、是什么

react应用中,事情名都是用小骆驼峰文件格式进行编写,例如onclick要更改成onClick

比较简单的事情关系下列:

class ShowAlert extends React.Component {
  showAlert() {
    console.log("Hi");
  }

  render() {
    return <button onClick={tHIS.showAlert}>show</button>;
  }
}

从上面可以 看到,事情关系的方法务必 运用{}包起來

之上的编号看上去沒有难题,但是当将解决涵数输出编号换为console.log(this)的情形下,点一下功能键,则会发现操作面板输出undefined

二、如何关系

为了更好地更好的解决上面适当输出this的难点,广泛的关系方式有下列:

  • render方法中运用bind
  • render方法中运用箭头函数
  • constructor中bind
  • 定义阶段运用箭头函数关系

render方法中运用bind

倘若运用一个类构件,在这里在其中给某一构件/元素一个onClick特点,它现如今并会自定关系其this到现如今构件,解决这个问题的方法是在事情涵数后运用.bind(this)this关系到现如今构件中

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>test</div>
    )
  }
}

这类方法在构件每一次render3D3D渲染的情形下,全是会再度进行bind的操作过程,伤害特点

render方法中运用箭头函数

依据ES6的前后文来将this的偏重关系给现如今构件,一样在每一次render的情形下基本都是会转换成新的方法,伤害特点

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={e => this.handleClick(e)}>test</div>
    )
  }
}

constructor中bind

constructor中事前bind现如今构件,可以 避免 在render操作过程中不断关系

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

定义阶段运用箭头图标涵数关系

跟之上方式三一样,能够 预防在render操作过程中不断关系,进行也十分的简单,下列:

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

三、区别

之上四种方法的方式,区别重要下列:

  • 编写方面:方式 一、方式二撰写简单,方式三的编写过多复杂
  • 特点方面:方式一和方式二在每一次构件render的情形下基本都是会转换成新的方法实例,特点难点欠缺。若该涵数作为特点值发给子构件的情形下,全是会导致额外的3D渲染。而方式三、方式四只会转换成一个方法实例

综合型之上,方式四是最好的事情关系方式