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，因为它每次都会创建一个新功能。最后，数学运算需要parens - 你不能使用{()}，因为如果我想使用像{(a + b) * c}这样的数学运算怎么办？目前，JSX所做的任何插值都必须是JavaScript表达式，所以除非JavaScript本身支持这种语法，否则插值也不太可能。

您可能对function bind运算符感兴趣，但我建议您避免以这种方式使用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，因此无需使用绑定。

如果JSX要为此引入替代语法，我个人会反对它，但如果他们能够克服我上面提到的限制，那么从技术上来说就没有什么能阻止它们。

Answer 2

让我从设计/哲学角度回答这个问题，而不是技术问题（其他答案已经做得很好）。

React COULD有，没有问题。但是为什么有多种方法可以做到（React试图保持尽可能接近ES标准）。如果有多种方法可以执行单个任务，那么它将影响跨代码库的可读性，使开发人员更难以轻松进入代码库，因为他们必须在抽象层上解析层，直到他们达到核心思想。

基本上，我认为这是一个设计选择，不添加大量可能已添加的语法糖（JSX本身已经是一种语法糖，我们的语法糖不需要语法糖）。

来自React Docs：

“一般来说，我们拒绝添加可以在用户区域中实现的功能。我们不希望使用无用的库代码来破坏您的应用程序。但是，也有例外。”

“我们更喜欢无聊的代码来使用聪明的代码。代码是一次性的并且经常会发生变化。因此，除非绝对必要，否则不会引入新的内部抽象。”

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

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

Answer 3

ES6的问题更多，它没有将“this”自动绑定到类方法。在ES7中，有一个建议引入一个新的运算符::。使用ES7，您可以写：

onClick={this::foo}

为什么JSX“糖”中没有函数引用？

3 个答案: