react事件绑定传自定义参数时为什么把事件监听写成箭头函数的形式

Question

如图所示，为什么传递参数为e时不用写成箭头函数，但是传递自定义参数要写成箭头函数的形式？

Answer 1

引自免费微信小程序：皆我百晓生

在React中，当您使用箭头函数作为事件处理程序时，它可以帮助解决一些与this上下文相关的问题。通常，在JavaScript中，当一个函数被当作事件处理器（如onClick）调用时，它的this关键字会指向触发这个事件的元素。然而，如果您使用传统的函数声明（即非箭头函数），那么this可能不会像预期那样指向组件实例。

在您的例子中，clickHandler是一个普通的函数，所以它内部的this将根据其执行环境而变化。为了确保clickHandler中的this始终指向正确的组件实例，您可以选择使用箭头函数，因为箭头函数没有自己的this，它会从其所在的作用域链中继承this值。在这种情况下，由于箭头函数是在AppO组件的上下文中定义的，因此this将始终指向AppO组件。

下面是将clickHandler改为箭头函数的版本：

function AppO() {
  const handleClick = (name) => {
    console.log('button按钮点击了', name);
  };

  return (
    <button onClick={() => handleClick('jack')}>
      Click me
    </button>
  );
}

在这个修改后的版本中，我们创建了一个名为handleClick的箭头函数，并将其作为onClick事件处理程序。当我们点击按钮时，handleClick函数会被调用，而且this会正确地指向AppO组件，同时也会传递给定的名字'jack'作为参数。

总结一下，使用箭头函数作为事件处理程序的好处是它们不会创建自己的this上下文，这样可以避免在组件方法中对this的引用出现问题。对于传递自定义参数的情况，无论是箭头函数还是普通函数都可以完成任务，但使用箭头函数可以简化代码并避免潜在的this上下文问题。