Question

我刚刚开始使用React Native并习惯了JSX语法。这就是我在说什么？或者我在谈论TypeScript？或者...... ES6？总之...

我见过这个：

const { foo } = this.props;

在类函数中。花括号的目的是什么，使用它们和不使用它们之间的区别是什么？

Answer 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构思。

Answer 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(){ ... }, 
... }

在JSX中用Curly Braces声明Const

2 个答案: