在 JSX 中用花括号声明常量答案

【问题标题】：Declaring Const With Curly Braces in JSX在 JSX 中用花括号声明常量
【发布时间】：2016-12-10 14:06:56
【问题描述】：

我刚刚开始使用 React Native 并习惯了 JSX 语法。这就是我在说的吗？还是我在谈论 TypeScript？还是... ES6？总之……

我看过这个：

const { foo } = this.props;

在类函数中。花括号的用途是什么，使用和不使用有什么区别？

【问题讨论】：

它叫Destructuring

标签： react-jsx jsx

【解决方案1】：

是destructuring assignment。

解构赋值语法是一个 JavaScript 表达式可以从数组中解压缩值，或从对象，转换为不同的变量。

示例（ES6）：

var person = {firstname: 'john', lastname: 'doe'};

const firstname = person.firstname;
const lastname = person.lastname;

// same as this
const { firstname, lastname } = person;

您可以在MDN找到更多信息

编辑：对于熟悉 Python 语言的开发人员来说，与 Python 解包语法进行比较可能会很有趣。 Python2.7：

>>> _tuple = (1, 2, 3)
>>> a, b, c = _tuple
>>> print(a, b, c)
(1, 2, 3)

借助 Python3 的新功能，如PEP 3132，您还可以执行以下操作：

>>> _range = range(5)
>>> a, *b, c = _range
>>> print(a, b, c)
0 [1, 2, 3] 4

增加了例子，因为已经知道其他语言的类似方法，你可以更快地掌握 JS 的想法。

【讨论】：

看起来这对我来说可能是正确的，虽然我猜“应用程序”是指“人”？而且我猜“first_name”和“last_name”不应该有下划线。但我明白你的意思！
@Varrick，是的，错别字。下划线不会得到关于相同变量名的错误。更新示例。
这样声明多于 1 个变量时有意义：const { firstname, lastname } = person; 但它与只有 1 个变量有什么相关性，例如：const { new_person } = person;
Python 在这里做什么？
@robinmetral "增加了例子，因为已经知道其他语言的类似方法，您可以更快地掌握 JS 思想。"

【解决方案2】：

是的，这是 ECMASCRIPT 6 的解构赋值功能

例如：

const { createElement } = React
const { render } = ReactDOM

const title = createElement('h1', {id: 'title', className: 'header'}, 'Hello World')

render(title, document.getElementById('react-container'))

这里^

React == { 
  cloneElement  : function(){ ... },
  createElement : function(){ ... },
  createFactory : function(){ ... }, 
... }

【讨论】：