React疑问：为何修改后的onSubmit代码会自动执行？

我编写了如下React表单组件：

function handleSubmit(event) {
  event.preventDefault(); // Prevent the default form submission behavior
  console.log('You clicked submit.');
}

function MyForm() {
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

该组件点击提交按钮时会正常触发console.log。但当我将form的onSubmit改为：

<form onSubmit={console.log('You clicked submit.')}>

时，无需点击提交，console.log就会在组件渲染时自动执行。我想理解React的运行机制，疑惑是否onSubmit花括号内的代码会在渲染时自动执行，以及背后的逻辑是怎样的？

原因解析 #

这和React的渲染逻辑直接相关：

• 当你在JSX的属性（比如onSubmit）的花括号{}里写代码时，这段代码会在组件渲染阶段立即执行，执行结果会作为属性的值传给对应的元素。
• 第一种写法里，onSubmit={handleSubmit}是把handleSubmit这个函数的引用传给了onSubmit属性。React会在表单提交事件触发时，才去调用这个函数。
• 第二种写法onSubmit={console.log('You clicked submit.')}里，console.log(...)是一个立即执行的函数调用，组件渲染时就会执行这段代码，把执行结果（console.log返回undefined）传给onSubmit。这就导致还没点击提交，日志就已经打印出来了，而且真正触发提交事件时，因为onSubmit的值是undefined，不会有任何响应。

简单总结：JSX属性花括号里的代码是“求值代码”，会在渲染时算出结果；而事件回调需要传的是函数引用，让React在事件发生时再去调用它。如果要直接写内联代码，应该用箭头函数包裹，比如：

<form onSubmit={() => console.log('You clicked submit.')}>

这样箭头函数的引用会被传给onSubmit，只有当提交事件触发时，箭头函数内部的console.log才会执行。

内容的提问来源于stack exchange，提问作者JobHunter69