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

Question

我开始研究 React Native，在大多数情况下，我做得很好。但是，虽然我知道解构的概念，但我还是对这段代码摸不着头脑。

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”。简单来说，这是一个 shorthand 用于在单个语句中分配多个变量，从 = 运算符右侧的对象中提取它们的值。与做的一样：

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

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

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

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

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

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

Can someone explain this react native code snippet to me?

javascript

native

destructuring

reactjs