React 学习笔记：事件处理

React 事件处理

React 采用 on+ 事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写 onclick , React 里的事件是驼峰 onClick 。并且 React 中若想阻止默认事件需要显示的调用 e.preventDefault，而不是返回 false 。React 的事件并不是原生事件，而是合成事件。

注意： React 并不会把事件处理函数直接绑定到真实的节点上，而是利用事件委托把所有事件绑定到结构的最外层，使用一个统一的事件监听器，在这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象；当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。

事件对象

React 中事件会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致。不同的是 React中的 event 对象并不是浏览器提供的，而是它自己内部所构建的。它同样具有 event.stopPropagation 、 event.preventDefault 这种常用的方法。

每次事件触发后(事件处理函数调用完成后)，就会清空 event 对象当下一次事件触发时重新获取该对象。由于这个特性，异步函数无法拿到事件对象，因为那时候事件对象（event）已经被清空了。此时我们可以先用临时变量保存一下需要使用的值，等异步结束后使用。

类组件绑定事件

直接在 render 里写行内的箭头函数

• 优点
  不用在构造函数中绑定 this，此时 this 指向当前组件实例
• 缺点
  当函数的逻辑比较复杂时，render 就显得臃肿，无法直观的看到组件的UI结构，代码可读性差。

class Son extends React.Component {
  render() {
    return <button onClick={() => console.log(this)}>输出this</button>
  }
}

在组件内使用箭头函数定义一个方法

这样定义事件主要是利用了箭头函数的特性，箭头函数的 this 就是定义该函数时的对象，与调用对象无关。所以此时函数的 this 就是当前实例对象。

class Son extends React.Component {
  handleClick = () => {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>输出this</button>
  }
}

在render里绑定 this

• 优点
  在调用事件处理函数时,传参比较方便

• 缺点
  每次调用 render 函数时都重新绑定,导致性能下降

class Son extends React.Component {
  handleClick() {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>输出this</button>
  }
}

在 constructor 中绑定 this

• 优点
  在 render 函数调用时不需要重新创建事件处理函数，this 指向当前组件实例。

• 缺点
  当事件处理很多时，构造函数就显的很繁琐。

class Son extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>输出this</button>
  }
}

类组件传参

在 render 中通过 bind 绑定事件时传参。

class Son extends React.Component {
  handleClick(item) {
    console.log(item);
  }
  render() {
    return <button onClick={this.handleClick.bind(this, '孤城浪人')}>输出this</button>
  }
}

在绑定事件时在处理程序外边套一层箭头函数并传参。

class Son extends React.Component {
  handleClick(item) {
    console.log(item);
  }
  render() {
    return <button onClick={() => this.handleClick('孤城浪人')}>输出this</button>
  }
}

将数据绑定到真实 DOM 上间接传参。

class Son extends React.Component {
  handleClick(e) {
    console.log(e.target.dataset.name);
  }
  render() {
    return <button onClick={this.handleClick} data-name="孤城浪人">输出this</button>
  }
}

函数组件绑定事件

函数组件没有 this 的绑定问题，因为基本不会用到 this ，可以使用钩子来作为函数组件的状态。

function Son() {
  const name = '孤城浪人';
  function handleClick(e) {
    console.log(name, e.target.dataset.name);
  }
  return <button onClick={handleClick} data-name="孤城浪人">输出this</button>
}

一点思考

不知道你有没有想过为什么函数需要绑定 this，我的理解是 React 组件需要函数来完成交互，而交互的结果就是组建本身维持的状态的改变，所以函数中需要拿到组建本身的状态，因此函数需要绑定 this 获取组件实例，继而拿到状态并使用。

但是由于函数组件在 16.8 版本以前没有状态，所以不需要绑定 this。16.8 版本以后有了钩子就有了状态，注意可以简单理解钩子函数声明的状态本身就处在函数组件的函数作用域内，所以函数组件绑定的函数自然能够拿到该状态且不需要绑定 this（就是闭包吧）。

我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。