为什么 JSX "sugar" 中的函数引用没有被定义？

Question

例如，

我们可以使用

onClick={(foo)}

或其他东西.. 而不是

onClick={this.foo.bind(this)}

只是好奇是否有任何特定的技术限制。

Answer 1

onClick={foo}和onClick={this.foo.bind(this)}是完全不同的东西，数学需要括号。
.bind 导致在每次调用时都创建一个新函数，因此性能不会很高。
（我假设）JSX 的目标是尽可能接近常规 JS，因此很容易上手。
添加新的语言元素不是JSX的境界；绑定运算符绝对是一种新的语言元素。

如果您注意到，除了调用 React.createElement 所必需的之外，JSX 不提供任何新的语言结构。此外，您可能不想像这样使用 .bind ，因为它每次都会创建一个新函数。最后，括号是数学运算所必需的——你不能使用 {()}，因为如果我想使用像 {(a + b) * c} 这样的数学运算怎么办？目前，JSX 所做的任何插值都必须是 JavaScript 表达式，因此除非 JavaScript 本身支持此语法，否则插值不太可能支持。

您可能对 function bind 运算符感兴趣，但我建议您避免以这种方式使用绑定；相反，在组件构造函数中绑定一次函数，如下所示：

class MyComponent extends Component {
  constructor() {
    this.boundOnClick = this.onClick.bind(this)
  }
  render() {
    return <button onClick={this.boundOnClick}>Foo</button>
  }
}

// with function bind operator

class MyComponent extends Component {
  constructor() {
    this.boundOnClick = ::this.onClick
  }

  render() {
    return <button onClick={this.boundOnClick}>Foo</button>
  }
}

这确保您只创建绑定函数一次。对于无状态组件，您无权访问 this，因此无需使用 bind.

如果 JSX 引入替代语法，我个人会反对，但如果他们能够克服我上面提到的限制，技术上没有什么可以阻止他们。

Answer 2

更多的是 ES6 的问题，它没有自动绑定 "this" 到 class 方法。在 ES7 中，有提议引入一个新的运算符 ::。使用 ES7，你可以这样写：

onClick={this::foo}

Answer 3

让我从 design/philosophical 的角度而不是技术角度回答问题（其他答案已经很好地做到了）。

React 可以，那没有问题。但是，当你可以拥有一种方式时，为什么要有多种方式来做事（React 试图尽可能接近 ES 标准）。如果有多种方法来完成一项任务，它会影响代码库的可读性，使开发人员更难轻松进入代码库，因为他们必须层层分解抽象层，直到他们获得核心思想。

基本上，我认为不添加很多本可以添加的语法糖是一种设计选择（JSX 本身已经是一种语法糖，我们的语法糖不需要语法糖).

来自 React 文档：

"In general we resist adding features that can be implemented in userland. We don't want to bloat your apps with useless library code. However, there are exceptions to this."

"We prefer boring code to clever code. Code is disposable and often changes. So it is important that it doesn't introduce new internal abstractions unless absolutely necessary."

来源：https://facebook.github.io/react/contributing/design-principles.html

代表本次演讲的想法：https://www.youtube.com/watch?v=4anAwXYqLG8

为什么 JSX "sugar" 中的函数引用没有被定义？

Why aren't function reference in JSX "sugar"ified?

reactjs

react-jsx