React: 事件处理和绑定方法

2022-09-16 14:50:46 浏览数 (1)

1、事件处理

先看一个 demo

代码语言：javascript复制
import React, { Component } from 'react';
import { render } from 'react-dom';

class LikeButton extends Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  handleClick(e) {
    this.setState({ liked: !this.state.liked });
  }

  render() {
    const text = this.state.liked ? 'like' : 'haven't liked';
    return (
      <p onClick={this.handleClick.bind(this)}>
          You {text} this. Click to toggle.
      </p>
    );
  }
}

render(
    <LikeButton />,
    document.getElementById('example')
);

可以看到 React 里面绑定事件的方式和在 HTML 中绑定事件类似，使用驼峰式命名指定要绑定的 onClick 属性为组件定义的一个方法 {this.handleClick.bind(this)}。

注意要显式调用 bind(this) 将事件函数上下文绑定要组件实例上，这也是 React 推崇的原则：没有黑科技，尽量使用显式的容易理解的 JavaScript 代码。

2、'合成事件'和 '原生事件'

  • React 实现了一个“合成事件”层（synthetic event system），这个事件模型保证了和 W3C 标准保持一致，所以不用担心有什么诡异的用法，并且这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。
  • “合成事件”还提供了额外的好处：

2.1 事件委托

  • 事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。

“合成事件”会以事件委托（event delegation）的方式绑定到组件最上层，并且在组件卸载（unmount）的时候自动销毁绑定的事件。

2.2 原生事件

  • 比如你在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件。
  • 使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener。
代码语言：javascript复制
Warning: 
如果不在组件销毁的时候解除事件的话，会造成内存泄露的问题。

怎么解决这个问题？这里可以看我的相关文章 react 内存泄露常见问题解决方案

所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”，除非你有特别的理由，建议总是用 React 的方式处理事件。

3、事件绑定的几种方法

  • 由于类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。 通常如果不是直接调用，应该为方法绑定this。绑定方式有以下几种：

3.1、 在构造函数中使用bind绑定this

代码语言：javascript复制
class Button extends React.Component {
constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

3.2、在调用的时候使用 bind 去绑定 this

代码语言：javascript复制
class Button extends React.Component {
  handleClick(){
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        Click me
      </button>
    );
  }
}

3.3、调用的时候使用箭头函数绑定 this

代码语言：javascript复制
class Button extends React.Component {
  handleClick(){
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={()=>this.handleClick()}>
        Click me
      </button>
    );
  }
}

3.4、使用属性初始化语法直接绑定

代码语言：javascript复制
class Button extends React.Component {
  handleClick=()=>{
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

3.5、比较上诉几个方式的优劣

  • 3.2和 3.3 方法都是调用的时候再绑定 this
    • 优点： 写法简单，组件中没有 state 的时候不需要添加构造函数来绑定 this
    • 缺点： 每一次调用的时候都会生成一个新的方法实例，因此对性能有影响，并且当这个函数作为属性值传入低阶组件的时候，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为的新的属性传递。
  • 3.1 方法在构造函数中绑定了 this，调用的时候不需要二次绑定
    • 优点：只会生成一个方法实例，并且绑定一次之后如果多次用到这个方法也不需要绑定了。
    • 缺点：即使不适用 state 的时候也需要在构造函数中绑定 this，代码量多。
  • 3.4 方法 利用属性初始化语法，将方法初始化为箭头函数，因此在创建函数的时候就绑定了this。
    • 优点：创建方法就绑定this，不需要在类构造函数中绑定，调用的时候不需要再作绑定。结合了方式1、方式2、方式3的优点
    • 缺点：以前有需要 babel 转移的需求，现在随着性能越来越好，也会考虑这一点消耗的问。

3.6 怎么传参？

  • 给事件处理函数传递额外参数的方式：bind(this, arg1, arg2, ...)
    • 非 bind 的直接传参就可以了。
代码语言：javascript复制
render: function() {
    return <p onClick={this.handleClick.bind(this, 'extra param')}>;
},
handleClick: function(param, event) {
    // handle click
}

3.7 事件绑定方法总结

方式1是官方推荐的绑定方式，也是性能最好的方式。方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。方式4是性能比较好的，现在 babel 已经很成熟了，推荐大家使用

参考

  • react.docschina.org/
  • caibaojian.com/react/compo…
react babel.js

0 人点赞