面试题：React中箭头函数处理事件与传统函数对比及场景选择

箭头函数处理事件

优点：
- 简洁：语法更简洁，代码更清晰，例如const handleClick = () => console.log('Clicked');。
- 词法作用域：箭头函数没有自己的this，它的this取决于外部作用域，在React组件中使用，this指向组件实例，避免了传统函数中this指向不明确问题，如在render方法中使用箭头函数作为事件处理函数，无需手动绑定this。
缺点：
- 不利于调试：箭头函数没有name属性，在调试工具中，难以识别事件处理函数，例如console.log(handleClick.name)为''。
- 不能用作构造函数：箭头函数不能使用new关键字调用，若业务场景涉及到构造函数相关处理，不能使用箭头函数。

传统函数处理事件

优点：
- 有name属性：方便调试，通过console.log(handleClick.name)可得到函数名，在调试工具中更易识别。
- 可作为构造函数：适用于需要创建对象实例的场景。
缺点：
- this指向问题：函数内部的this指向取决于函数的调用方式，在React组件中使用传统函数作为事件处理函数，this默认指向window（严格模式下为undefined），需手动绑定this，如this.handleClick = this.handleClick.bind(this);。
- 语法相对复杂：相比箭头函数，代码量更多。

不同业务场景选择

简单展示类组件：对于只需要简单处理展示相关的点击等事件，如展示隐藏某个元素，箭头函数因其简洁性和词法作用域特性更合适，例如在一个展示按钮点击后显示一段文字的组件中：

import React from 'react';

const MyComponent = () => {
  const [isVisible, setIsVisible] = React.useState(false);
  const handleClick = () => setIsVisible(!isVisible);
  return (
    <div>
      <button onClick={handleClick}>Toggle Visibility</button>
      {isVisible && <p>Visible text</p>}
    </div>
  );
};

export default MyComponent;

复杂逻辑或需要继承场景：当事件处理涉及复杂业务逻辑，可能需要使用构造函数或继承等特性时，传统函数更合适。例如创建一个具有特定属性和方法的表单验证类，并且在事件处理中使用该类实例：

import React, { Component } from'react';

class FormValidator {
  constructor() {
    this.rules = {};
  }
  validate() {
    // 验证逻辑
  }
}

class MyForm extends Component {
  constructor(props) {
    super(props);
    this.validator = new FormValidator();
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    event.preventDefault();
    this.validator.validate();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* 表单元素 */}
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default MyForm;

星途面试题库

面试题：React中箭头函数处理事件与传统函数对比及场景选择

知识考点

面试题答案

箭头函数处理事件

传统函数处理事件

不同业务场景选择