Question

我开始研究本机的反应，对于大多数人来说，我做得很好。但是，虽然我知道解构的概念，但是，我正在用这段代码轻描淡写。

var {
          View,
          Text,
          Image,
          Animated,
          StatusBarIOS,
          TouchableOpacity,
          DeviceEventEmitter
    } = React;

有人可以向我解释一下吗？谢谢！

Answer 1

这只是ES6对象的解构。它实质上是为对象中列出的每个关键字创建一个新变量。

等同于：

var View = React.View;
var Text = React.Text;
var Image = React.Image;
var Animated = React.Animated;

..等等

如果不清楚这一点，请以一个简单的对象为例：

const person = {
  name: 'sam',
  gender: 'male',
  age: 52
}

// create a variable for any property you want from the person object
let { name, age } = person;

console.log(name) // 'sam'
console.log(age) // 52..

正如下面的评论中提到的，因为您已经在使用ES6语法，因此很可能使用构建工具或在支持ES6的环境中使用let或const而不是ES5 var

Answer 2

这是ES2015“destructuring assignment”。简单来说，这是在单个语句中分配多个变量的简写，从=运算符右侧的对象中提取它们的值。和做的一样：

var View = React.View,
    Text = React.Text,
    Image = React.Image,
//... and so on.

所以，这里要注意的重要部分是这是以下的简短方法：

var {
  View: View,
  Text: Text, 
  // ...   
} = React;

但是，由于新创建的变量与React对象的属性具有相同的名称，因此可以简化为：

var {
  View,
  Text, 
  // ...   
} = React;

有人可以向我解释这个反应本机代码片段吗？

2 个答案: