面试题：React中事件处理函数里this绑定常见方式有哪些

Question

在React的事件处理中，this绑定是一个常见问题。请阐述至少两种在React事件处理函数中正确绑定this的方式，并说明它们各自的优缺点。

Answer 1

1. 使用箭头函数

• 方式：在 JSX 中直接使用箭头函数来定义事件处理函数。例如：

class MyComponent extends React.Component {
  handleClick() {
    console.log(this);
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}

• 优点：
  • 语法简洁，不需要额外的绑定操作，代码可读性高。
  • 箭头函数不会创建自己的 this，它会继承外层作用域的 this，因此在这种情况下 this 会正确指向组件实例。
• 缺点：
  • 每次渲染时都会创建一个新的函数，这可能会影响性能，尤其是在函数作为 prop 传递给深层子组件时，会导致子组件不必要的重新渲染。

2. 在构造函数中绑定

• 方式：在组件的构造函数中使用 bind 方法绑定 this。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

• 优点：
  • 只在构造函数中绑定一次，性能较好，不会在每次渲染时创建新的函数。
  • 清晰地表明了哪些函数需要绑定 this，代码结构更清晰。
• 缺点：
  • 构造函数中代码增多，尤其是当有多个事件处理函数需要绑定时，构造函数会显得臃肿。
  • bind 方法的语法相对复杂一些。

3. 使用属性初始化器语法（ES6 类字段）

• 方式：使用类字段语法定义箭头函数形式的事件处理函数。例如：

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this);
  }
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

• 优点：
  • 语法简洁，兼具箭头函数和构造函数绑定的优点，不会在每次渲染时创建新函数。
  • 直接在类的字段中定义，逻辑更集中，代码看起来更简洁直观。
• 缺点：
  • 该语法是 ES6 类字段提案的一部分，一些较旧的 JavaScript 环境（如不支持 ES6 类字段的浏览器）可能不支持，需要使用 Babel 等工具进行转译。