如何理解这个语法？ var {...} = 反应；

Question

在本机反应示例中： https://github.com/facebook/react-native

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <TouchableHighlight onPress={() => console.log('pressed')}>
          <Text>Proper Touch Handling</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

这个语法是什么意思？

var { ScrollView, TouchableHighlight, Text } = React;

我在 nodejs 控制台输入它导致语法错误。这种特殊的 Javascripts 语法只适用于 React Native 吗？

谢谢

Answer 1

即Destructuring, an ECMAScript 6 feature。据我所知，它还没有包含在任何版本的 node.js 或 iojs 中，但是可能有一个命令行标志可以用来启用它。

Answer 2

This document 描述了 React Native 支持的 JavaScript 环境。

ES5

Reserved Words: promise.catch(function() { });

ES6

Arrow function: <C onPress={() => this.setState({pressed: true})}

Call spread: Math.max(...array);

Class: class C extends React.Component { render() { return <View />; } }

Destructuring: var {isActive, style} = this.props;

Iteration: for (var element of array) { }

Computed Properties: var key = 'abc'; var obj = {[key]: 10};

Object Consise Method: var obj = { method() { return 10; } };

Object Short Notation: var name = 'vjeux'; var obj = { name };

Rest Params: function(type, ...args) { }

Template: var who = 'world'; var str = `Hello ${who};`

ES7

Object Spread: var extended = { ...obj, a: 10 };

Function Trailing Comma: function f(a, b, c,) { }

如何理解这个语法？ var {...} = 反应；

How to understand this syntax? var {...} = React;

javascript

facebook

node.js

react-native