react-jsx – 在JSX中使用Curly Braces声明Const

前端之家收集整理的这篇文章主要介绍了react-jsx – 在JSX中使用Curly Braces声明Const前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚刚开始使用React Native并习惯了JSX语法.这就是我在说什么?或者我在谈论TypeScript?或者…… ES6?无论如何…

我见过这个:

  1. const { foo } = this.props;

里面有一个类功能.花括号的目的是什么,使用它们和不使用它们之间的区别是什么?

这是 destructuring assignment.

The destructuring assignment Syntax is a JavaScript expression that
makes it possible to unpack values from arrays,or properties from
objects,into distinct variables.

示例(ES6):

  1. var person = {firstname: 'john',lastname: 'doe'};
  2.  
  3. const firstname = person.firstname;
  4. const lastname = person.lastname;
  5.  
  6. // same as this
  7. const { firstname,lastname } = person;

您可以在MDN找到更多信息

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

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

使用Python3的新功能,如PEP 3132,您还可以执行以下操作:

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

添加了一些示例,因为您已经了解了与其他语言类似的方法,因此您可以更快地掌握JS构思.

猜你在找的React相关文章