javascript - React 如何区分用于求值的大括号和用作 JS 的大括号？

Question

我正在查看我的代码并注意到这一点(简化):

onClick={ () => {
    console.log("foo");
} }

有 2 组花括号。第一对(外部)告诉 React 作为 JS 进行计算。第二对只是函数的 JS 表示法。 React 如何知道不评估第二对中的内容而是将其保留？

为了澄清，我认为这段代码应该在代码编译时打印 foo (没有单击按钮)，然后由于不正确的函数符号而出错(因为我认为 React 应该运行第二对内部的代码而不是离开如果有意义的话，就单独讨论)。

Answer 1

您缺少的重要部分是 () =>。

这告诉浏览器接下来是匿名函数声明。这称为“胖箭头”语法，或简称“箭头函数”

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

因为外面一对{}里面的部分是函数定义(因为它以() =>开头)console.log语句不会被运行直到有其他东西调用该函数。

在您的示例中，当用户单击最终由 React 呈现的 html 元素时，将调用该函数。