面试题：React 事件处理机制中如何传递参数

Question

在 React 应用里，通常会给事件处理函数传递额外参数。请举例说明至少两种在 React 事件处理机制中向事件处理函数传递参数的方式，并简述它们各自的特点。

Answer 1

方式一：使用箭头函数

1. 示例代码：

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick = (extraParam, event) => {
    console.log('Extra Param:', extraParam);
    console.log('Event:', event);
  }

  render() {
    return (
      <button onClick={(event) => this.handleClick('Hello', event)}>
        Click Me
      </button>
    );
  }
}

2. 特点：
   • 优点：语法简洁，方便直接在箭头函数内调用组件方法并传递额外参数。
   • 缺点：每次渲染组件时都会创建一个新的函数，可能会影响性能，尤其是在渲染频繁的场景下。

方式二：使用 bind 方法

1. 示例代码：

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick = (extraParam, event) => {
    console.log('Extra Param:', extraParam);
    console.log('Event:', event);
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this, 'Hello')}>
        Click Me
      </button>
    );
  }
}

2. 特点：
   • 优点：bind 方法返回一个新的绑定函数，该函数的 this 被绑定到指定对象，并且可以预先传入部分参数。相比箭头函数，在性能上可能更好，因为它不会在每次渲染时创建新函数（前提是 bind 操作在 render 之外）。
   • 缺点：语法相对箭头函数稍显冗长，需要理解 bind 方法的作用和用法。